你这结构肯定不对。
<ul><li>
<h1>标题</h1>
<ul>
<li>子标题</li>
<li>子标题</li>
<li>子标题</li>
</ul>
</li>
</ul> ul li{
position:relative
}
ul li ul{
position:absolute
}
<!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设置的背景色刚好是‘到底了’的文字的背景色,同时也用了行内块、透明度以及相对定位来实现了的噢。
css中使用textdecoration属性就可以直接设置划线效果。对字体样式文本加下横线款式,有二种方式,一直立即应用html下横线标识,此外一种是应用CSS下横线款式。这个属性允许对文本设置某种效果,如加下划线。
。如果后代元素没有自己的装饰,祖先元素上设置的装饰会延伸到后代元素中。不要求用户代理支持blink。