CSS下划线是网页设计中常用的一种装饰性效果。但有时候划线距离文字的位置会让人感觉不协调,该如何调整呢?下面介绍几种方法。/ 1. 使用lineheight / .text { textdecorat...
CSS下划线是网页设计中常用的一种装饰性效果。但有时候划线距离文字的位置会让人感觉不协调,该如何调整呢?下面介绍几种方法。
/* 1. 使用line-height */
.text {
text-decoration: underline;
line-height: 2em; /* 值可以自行调整 */
}
/* 2. 使用padding或margin */
.text {
text-decoration: underline;
padding-bottom: 5px; /* 值可以自行调整 */
/* 或 */
margin-bottom: 5px; /* 值可以自行调整 */
}
/* 3. 使用border-bottom */
.text {
border-bottom: 1px solid black; /* 值可以自行调整 */
padding-bottom: 2px; /* 值可以自行调整 */
}
/* 4. 使用伪元素 */
.text:before {
content: "";
display: block;
border-bottom: 1px solid black; /* 值可以自行调整 */
width: 50%; /* 值可以自行调整 */
margin: 0 auto; /* 居中 */
margin-bottom: 5px; /* 值可以自行调整 */
}
.text {
text-decoration: none; /* 去掉原有的下划线 */
text-align: center; /* 居中 */
} 在实际应用中,我们可以根据实际情况选择合适的方法进行调整。