实现文字后面加一条横线的效果

淡淡的烟草味﹌ 2022-05-22 06:47 250阅读 0赞

学习是一个长期积累的过程，积累的多了也就有经验了，有能力了；

无论再忙也要坚持学习，继续我的学习！

实现的效果图：

![70][]

我们能够看到，文字的两边出现了一小节横线；

实现思路：

第一步：先实现一个外层的 div ，即图中的长方形部分，这个的作用是便于将文字部分放置在想要放置的地方；

第二步：在上面的div中再写一个 <div> 放置文字，或者用一个 <p> 来实现也是好的 ;

第三步：再来一个 <div> 用来实现横线，然后使用定位将横线定位到想要的位置，调整层级关系即可；

完整代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >line-behind 在文字背后实现一条横线 </ title >

< style >

.container \{

width :  500 px ;

height :  100 px ;

border :  1 px  solid red;

margin :  0  auto;

position : relative;

\}

.wrap \{

width :  200 px ;

height :  50 px ;

*/\* border: 1px solid green; \*/*

margin :  0  auto;

margin-top :  25 px ;

z-index : 2 ;

position :relative;

text-align :center;

line-height : 50 px ;

background-color :  \#fff ;

font-size : 16 px ;

\}

.line \{

width :  300 px ;

border :  1 px  solid red;

position : absolute;

left :  50 % ;

margin-left :  \-150 px ;

top :  50 px ;

z-index :  \-1 ;

\}

< / style >

</ head>

< body>

< div class= "container" >

< div class= "wrap" >

我的背后出现了一条横线

</ div >

< div class= "line"></ div>

</ div >

</ body>

</ html>

[70]: /images/20220522/5d89aacba6a145a0813d1d9519e3668f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS：文字下方亮条穿梭效果

先看效果： ![ae46f79134294d9c8e779b00f17fd3f3.gif][] 这个效果很简单，被h元素包裹起来的文字，下方增加了一个动态的穿梭亮条，当鼠标

Bertha 。/ 2024年03月23日 20:43/ 0 赞/ 17 阅读

相关 Java Swing 实现loading进度条加载效果

前言必读 > [读者手册（必读）\_云边的快乐猫的博客-CSDN博客][-CSDN] 前言：这个可以用来做一些页面的加载进度条还是很不错的，起到美观的作用，一些代码

亦凉/ 2023年09月23日 14:27/ 0 赞/ 143 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 270 阅读

相关段落文字彩条效果

程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit

朱雀/ 2022年08月06日 17:03/ 0 赞/ 224 阅读

相关实现阮一峰ES6的顶部加载条效果

效果例子 > 阮一峰的ES6：[http://es6.ruanyifeng.com/?search=s&x=13&y=3][http_es6.ruanyifeng.com

你的名字/ 2022年06月15日 06:37/ 0 赞/ 183 阅读

相关 word中文字后面的空格加不上下划线

word中文字后面的空格加不了下划线了！！！当大家看到有这种情况的时候，请不要着急，下面几步帮你搞定。 ![Image 1][] \-------

本是古典何须时尚/ 2022年06月15日 02:09/ 0 赞/ 309 阅读

相关 css实现左右横线中间文字效果

样式 .title { display: table; width: 100%; line-height: 32px; background-color: fff

矫情吗；*/ 2022年05月29日 03:49/ 0 赞/ 317 阅读

相关实现文字后面加一条横线的效果

学习是一个长期积累的过程，积累的多了也就有经验了，有能力了；无论再忙也要坚持学习，继续我的学习！实现的效果图： ![70][] 我们能够看到，文字的

淡淡的烟草味﹌/ 2022年05月22日 06:47/ 0 赞/ 251 阅读

相关 css 画一条竖线或横线

横线 <div style="width:100px;border: 1px solid d0d0d0;"></div> 竖线： <div

红太狼/ 2021年12月07日 12:04/ 0 赞/ 412 阅读

相关中间文字，两边横线（纯css实现）

遇到了一个中间文字，两边横线的布局，效果如下图： ![在这里插入图片描述][20190813092908117.png] 第一种方法：使用了背景色和透明度，细心的人可能

系统管理员/ 2021年10月18日 20:44/ 0 赞/ 668 阅读