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

淡淡的烟草味﹌ 2022-05-22 06:47 272阅读 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 条评论，272人围观）

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

相关阅读

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

目录前言一、Java Swing实现二、Java for循环遍历实现 -------------------- 前言进度条在我们日常使用的软件中

曾经终败给现在/ 2023年10月16日 15:50/ 0 赞/ 35 阅读

相关文字走马灯效果的实现

核心思路是通过用margin-left这个属性来控制div的定位，通过不断提高margin-left的值来实现走马灯左右移动的效果，代码中的1218是这个文字div块的宽度，当

╰+哭是因爲堅強的太久メ/ 2023年07月25日 12:49/ 0 赞/ 32 阅读

相关 input的radio实现点击文字，后面的框框也选中的效果

![2020052610220361.gif][] <!DOCTYPE html> <html lang="en"> <head>

快来打我*/ 2023年02月12日 12:26/ 0 赞/ 55 阅读

相关实现文字滚动效果

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

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

相关段落文字彩条效果

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

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

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

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

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

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

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

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

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

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

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

相关 css 画一条竖线或横线

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

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

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

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

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