css after伪元素做文字下划线

效果如下：

代码如下：

html代码

<div class="login-main-header1 login-main-headerxz">账号登录</div>

css代码

.login-main-header1{font-size: 18px;font-weight: bold;color: #787d82;float: left;margin-right: 20px;}.login-main-headerxz{color: red;}.login-main-headerxz::after{//主要是这个content: '';width: 20px;height: 5px;display: block;margin: 0 auto;margin-top: 4px;background-color: red;border-radius: 30px;}

这样就可以了

css after伪元素做文字下划线相关推荐

css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
php css下划线,css如何添加文字下划线样式？（代码详解）
css如何添加文字下划线样式?本篇文章就给大家介绍css添加文字下划线样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css添加文字下划线样式的方法有哪 ...
php css下划线,CSS文字下划线的设置方法介绍
在整体网页设计中,最容易识别的风格仍然是带有下划线的蓝色文字,这大部分都是链接到另一个网页中.链接元素默认具有样式,蓝色是默认模式下的唯一颜色.即使现在的链接元素可能不再需要加下划线,文本下的行不仅仅 ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
css文字下划线效果
css文字下划线效果使用css实现下划线在鼠标放上去从左往右,离开也是从左往右的效果利用 :hover 改变下划线的宽度,来实现这个效果宽度改变的方向是从元素的定位来决定的,所以初始右定位设为0 ...
html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
CSS伪元素插入文字
解决方案: 当项目中需要给UI组件中的元素插入文字时,可以使用伪元素插入文字,调整样式此处使用:after伪元素来插入文字 /* 在vue3项目中使用:deep+scope实现局部样式 */ :de ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before
css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...

css after伪元素做文字下划线

css after伪元素做文字下划线相关推荐

最新文章

热门文章