html - 如何在属性之前为li添加样式
问题描述
这是我必须在每个 li 元素之前画一个圆圈的时间线图。
ul.timeline>li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
如何更改 HTML 元素上的边框颜色?
这是完整的示例:https ://bootsnipp.com/snippets/featured/simple-vertical-timeline
解决方案
我想您想在两个蓝色圆圈之间添加边框,还想删除默认ul
样式。
我在css
您的代码中添加了一些代码。看看下面。
- 要删除默认
ul
样式,我已添加list-style-type
为none
. - 为了添加连接列表项的垂直线,我添加了一个伪类元素
:before
到ul.timeline
.
ul.timeline {
list-style-type: none;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline>li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Latest News</h4>
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
推荐阅读
- c# - 使用 Process 类的 C# 网站无法使用 GPG 解密
- javascript - 检查 props 是否包含字符串或 SVG
- c++ - 我无法在 Visual Studio 上安装 libsndfile
- sql - 具有动态 IN 运算符和 INT 数据类型的 SQL Server 过程
- php - 为什么“if 语句”会忽略条件或将其视为不真实的条件,而实际上它们是不真实的?
- crystal-lang - Crystal lang 的堆栈中是否存在哈希?
- c - 发送数组时 MPI_Recv 发生错误
- python - 使用 Numpy 查找和打印数据异常值
- c# - 使用动态查找属性
- vue.js - 使用 nuxt auth 模块检测身份验证状态需要刷新