简体   繁体   English

如何使文字下划线css

[英]How to make text underline css

I have two <a> tags and I need them to be underlined like this: (notice that I can't use border-bottom: dashed 10px because lines are thin but the space between them is quite big. 我有两个<a>标签,我需要它们加下划线:(注意我不能使用border-bottom: dashed 10px因为线很细但它们之间的空间非常大。

我的文字

HTML: HTML:

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

CSS: CSS:

.t1 {
    color: #8bb09e;
}

.t2 {
    color: #ffee90;
}

There is 2 approaches, but this approach would be the usage of the border-bottom: value; 有两种方法,但这种方法是使用border-bottom: value;

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

If you want to use some other style that isn't going to happen. 如果你想使用一些不会发生的其他风格。 Like the space you're talking about. 就像你在谈论的空间一样。 Then you're more likely to be using an image for the bottom border and create a border-like-effect. 然后你更有可能将图像用于底部边框并创建类似边框的效果。

If you can give the anchor a position:relative attribute, I would use an absolutely positioned pseudo element. 如果你可以给锚一个position:relative属性,我会使用一个绝对定位的伪元素。 You can use a background image or a linear gradient like I did in my demo 您可以使用背景图像或线性渐变,就像我在演示中所做的那样

Demo: http://jsfiddle.net/6Jzu6/1 演示: 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;
}

Edit: Oops! 编辑:哎呀! credit where credit is due. 信用到期的信用。 I got the linear gradient concept from this source 我从这个来源得到了线性渐变概念

This is all you need :) 这就是你所需要的:)

.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 */
}

Edit 编辑

What you need is an addition of min-width property added to your <a> styles.check the demo 你需要的是添加一个min-width属性添加到你的<a> styles.check演示

Demo 演示

Here's a method I've used in the past. 这是我过去使用过的方法。 It uses a pseudo element that acts as a border. 它使用一个充当边框的伪元素。

http://jsfiddle.net/h7Z9K/ 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;
}

Adjust the position of the pseudo element border relative to the element by adjusting its bottom position. 通过调整其底部位置来调整伪元素边框相对于元素的位置。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM