如何使文本下划线css答案

【问题标题】：How to make text underline css如何使文本下划线css
【发布时间】：2014-06-11 11:54:41
【问题描述】：

我有两个<a> 标签，我需要像这样给它们加下划线：（请注意，我不能使用border-bottom: dashed 10px，因为线条很细，但它们之间的空间很大。

HTML：

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

CSS：

.t1 {
    color: #8bb09e;
}

.t2 {
    color: #ffee90;
}

【问题讨论】：

标签： html css underline

【解决方案1】：

有两种方法，但这种方法是border-bottom: value;的用法

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

如果您想使用其他一些不会发生的样式。就像你说的空间。那么您更有可能使用图像作为底部边框并创建类似边框的效果。

【讨论】：

【解决方案2】：

如果你可以给锚点一个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得到了线性渐变的概念

【讨论】：

【解决方案3】：

这就是你所需要的:)

.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> 样式中。查看演示

Demo

【讨论】：

再一次我需要增加边框底线之间的空间。

【解决方案4】：

这是我过去使用的一种方法。它使用一个伪元素作为边框。

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;
}

通过调整伪元素边框相对于元素的底部位置来调整其位置。

【讨论】：

【解决方案5】：

.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>

【讨论】：