html在字体两边加直线,css怎么在文字两边加上横线

css中可利用:before、:after和content属性来在文字两边加上横线；语法“E:before,E:after{content:"";flex:1 1;border-bottom:2px solid;}”，E为包含文字的元素。

本教程操作环境：Windows7系统、css3版本、Dell G3电脑。

css在文字两边加上横线的方法

在css中，可以利用:before、:after选择器和content属性来实现。

:before 选择器向选定的元素前插入内容，:after 选择器向选定的元素之后插入内容。

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

示例：

h4 {

display: flex;

flex-direction: row;

}

h4:before,

h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

img {

height: 100px;

width: 100px;

border-radius: 50%;

}

PHP中文网

效果图：

更多编程相关知识，请访问：编程教学！！

html在字体两边加直线,css怎么在文字两边加上横线相关推荐

html在字体两边加直线,CSS文字两边添加横线的几种方法
这里总结了五种关于文字两边添加横线的方法. 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老 ...
html文字左右两边有居中的直线,css怎么实现文字居中两边横线效果
css怎么实现文字居中两边横线效果发布时间:2021-03-19 09:50:44 来源:亿速云阅读:92 作者:小新这篇文章将为大家详细讲解有关css怎么实现文字居中两边横线效果,小编觉得挺实 ...
css字体描边加阴影,css text-shadow 轻松实现文字投影/描边/浮雕/剪纸/发光效果
css3很多知识值得我们去了解,一些我们惯常用图片制作出来的效果,也许用CSS3几行代码就能实现,正如本文介绍的,使用css text-shadow 属性,就能轻松实现文字投影/描边/浮雕/剪纸/发光 ...
html 字体样式加粗,css字体怎么加粗？
css可以使用font-weight属性设置文本加粗.该属性用于设置显示元素的文本中所用的字体加粗.所有主流浏览器都支持font-weight属性. font-weight 属性设置文本的粗细. 属性 ...
html中字体行间距怎么写,css行间距(html文字行间距怎么设置)
设置行距是 line-height 例如:line-height:30px; line-height:25px是绝对行高,line-height:2是默认行高的两倍,倍数用的多一些,因为子元素继承父样 ...
html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
HTML中用CSS样式实现文字两边添加水平线
(1)html中的代码: <div class="content"><p class="title">新特卖每日早10晚8上新</ ...
linux字体加粗,CSS Fonts(字体)介绍
导读 CSS字体属性定义字体,加粗,大小,文字样式. serif和sans-serif字体之间的区别在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读 CSS字型在CSS中, ...
html字两边的横线_css怎么在文字两边加上横线,word文字两边加横线
css怎么在文字两边加上横线CSS怎么在文本两侧添加水平线,在css中,可以使用:before.after和content属性在文本两侧添加横线:语法"e:在前,e:在后{内容:" ...

html在字体两边加直线,css怎么在文字两边加上横线

PHP中文网

html在字体两边加直线,css怎么在文字两边加上横线相关推荐

最新文章

热门文章