如何使文本下劃線的CSS

我有兩個<a>標籤和我需要他們來強調這樣的：（請注意，我不能使用border-bottom: dashed 10px，因爲線是瘦，但它們之間的空間是相當大的如何使文本下劃線的CSS

my text

HTML：

<a href="" class="t1">text1</a> 
<a href="" class="t2">text2</a>

CSS：

.t1 { 
    color: #8bb09e; 
} 

.t2 { 
    color: #ffee90; 
}

來源

2014-04-25 user2950593

有2點的方法，但是如果你想使用時不會發生一些其他風格的這種做法是的border-bottom: value;

.t1 { 
    border-bottom: 1px dashed #333; 
}

使用。就像你談論的空間一樣。那麼你更可能使用底部邊界的圖像並創建邊界效果。

來源

2014-04-25 16:44:14

這是你所需要的:)

.t1 { 
    display:inline-block; /* make width equal to link content */ 
    padding-bottom:5px; /* margin between underline and text*/ 
    border-bottom:1px dashed red; /* height type and color of underline */ 
}

編輯

你需要的是增加了一個另外min-width財產您<a> styles.check演示

Demo

來源

2014-04-25 16:44:24 NoobEditor

我再次需要增加邊界底線之間的空間。 – user2950593

已添加和編輯。，請檢查它是否有幫助！ :) – NoobEditor

如果你可以給主播一個position:relative屬性，我會使用絕對定位的僞元素。您可以使用一個背景圖像或線性漸變就像我在我的演示做

演示：http://jsfiddle.net/6Jzu6/1

a { 
    position: relative; 
    ... 
    display: block; 
    ... 
} 

a:after { 
    content: ''; 
    position:absolute; 
    height: 1px; 
    width: 100%; 
    top: 100%; 
    left: 0; 
    background-image: -webkit-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image: -moz-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:  -ms-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:  -o-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:   linear-gradient(left, transparent 50%, #8b0 50%); 
    background-size: 20px 20px; 
}

編輯：哎呀！信貸到期的信貸。我從this source得到線性梯度概念

來源

2014-04-25 16:53:29

以下是我過去使用過的方法。它使用一個充當邊界的僞元素。

http://jsfiddle.net/h7Z9K/

p { 
    display: inline-block; 
    position: relative; 
} 
p::after { 
    content: ""; 
    display: block; 
    width: 100%; 
    border-bottom: 1px dashed #000; 
    position: absolute; 
    left: 0; 
    bottom: -0.5em; 
}

通過調整其底部位置，調整僞元件邊界相對於所述元件的位置。

來源

2014-04-25 16:58:34

.t1 { 
 
    color: #8bb09e; 
 
    border-bottom-style: dashed !important; 
 
    width:30%; 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 

 
.t2 { 
 
    color: #ffee90; 
 
    text-align:center; 
 
    border-bottom-style: dashed !important; 
 
    float:right; 
 
    width:30%; 
 
}

<a href="" class="t1">text1</a> 
 
<a href="" class="t2">text2</a>

來源

2016-12-01 14:58:19

如何使文本下劃線的CSS

回答

相關問題