/* 定义分隔条样式 */
.separator {
width: 100%;
height: 2px;
background-color: #ccc;
margin: 10px 0;
}
/* 使用分隔条 */以上代码中，大家先定义了分隔条的样式，包括宽度、高度、背景色和边距等属性。然后在HTML代码中使用了一个div元素，并添加了separator类名，即可生成一个分隔条。
当然，大家还可以根据实际需要进行样式的修改，比如改变背景色、增加动画效果等等。
/* 修改分隔条样式 */
.separator {
width: 100%;
height: 2px;
background-color: #0066cc;
margin: 10px 0;
animation: blink 1s infinite;
}
/* 定义动画效果 */
@keyframes blink {
0% {background-color: #0066cc;}
50% {background-color: #fff;}
100% {background-color: #0066cc;}
}以上代码中，大家将分隔条的背景色改为蓝色，并增加了一个闪烁的动画效果，让页面更加生动有趣。
除了使用div元素生成分隔条外，大家还可以使用伪元素before和after来实现。以下是代码示例：
/* 使用伪元素生成分隔条 */
.separator:before, .separator:after {
content: "";
display: block;
width: 50%;
height: 2px;
margin: 10px 0;
background-color: #ccc;
}
.separator:before {
float: left;
}
.separator:after {
float: right;
}以上代码中，大家使用了两个伪元素before和after来生成分隔条，通过调整它们的位置和宽度，可以实现不同的分隔效果。
最后，大家需要注意的是，CSS分隔条只是一种样式效果，不能替代HTML语义标签的作用。因此，在设计页面时，还需要根据内容特点选择合适的语义标签来搭建页面结构。