CSS中如何给文字添加双下划线？

html-css031

CSS中如何给文字添加双下划线？,第1张

text-decoration:underline

padding-bottom:2px

border-bottom:1 solid#fff

设置下划线，然后再设置下边缘的border属性，并让其自适应大小，就可以实现双下划线的效果，

或者也可以用带双下划线的图片来代替，并让其自适应

<style>

span {border-top:3px double #000}

</style>

<p>这段文字没有双上划线<span>这段文字有双上划线</span>这段文字没有双上划线</p>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{background: #f0f0f0}

.con{position:relativeheight:1.875remline-height: 1.875remmargin:2.47rem autotext-align: center}

.con i{display:blockheight:1pxbackground:#e1e1e1position:absolutetop:0.9remwidth:100%}

.con p{

display:inline-block

font-size: 0.75rem

color:#c1c1c1

background:rgba(240,240,240,1)

padding:0 1.875rem

text-align: center

margin:0 auto

position:relative

z-index:2}

</style>

</head>

<body>

<div class="con">

<i></i>

<p>到底了</p>

</div>

</body>

</html>

这里使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘到底了’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现了的噢。