html - 如何使下划线出现在移动视图中的第二行之后?
问题描述
我已经为公司名称实现了蓝色下划线的代码,但是当它在移动视图中时,蓝线出现在第一行。我怎样才能让那个开始出现在第二行?
我的 CSS 代码
label {
margin: 0;
cursor: pointer;
position: relative;
text-decoration: none;
color: $text-default-color;
margin-right: 25px;
@media #{$sm-and-less} {
display: flex;
justify-content: space-between;
}
&:after {
@extend %nav-underline;
@extend %ease;
}
解决方案
你可以这样做:
label {
position: relative;
display: block;
padding-bottom: 8px;
margin-bottom: 30px;
}
label::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 40px;
height: 4px;
background-color: blue;
}
<label>
On one line Lorem ispum dolor sit amed
</label>
<label style="width: 100px;">
On two lines Lorem ispum
</label>
推荐阅读
- android - 布局与工厂名称重叠。谁能帮我这个
- java - 为什么我们不能通过未初始化的局部变量访问静态内容?
- python - 如何用元组列表替换列表中正则表达式匹配的模式?
- solr - Solr中距离为3的模糊搜索
- local - 本地家庭执行重启 Google Nest 中心
- python - 如何使用 python 日志记录模块在 dictConfig 文件中设置自定义日志记录处理程序
- javascript - 在 Vue.js 的子组件中放置 Modals
- c# - 多对多关系和创建视图
- c# - 如何使用 Convert.ToInt32 在 C# 中构造三元表达式?
- javascript - 如何让我的应用程序显示错误消息而不是损坏的图像链接?