用bootstrap4和jq写一个带圆角的标题线
时间: 2024-03-20 18:43:20 浏览: 15
以下是一个使用bootstrap4和jq实现带圆角的标题线的示例代码:
HTML代码:
```html
<div class="container">
<h2 class="title-line">Your Title</h2>
</div>
```
CSS代码:
```css
.title-line {
position: relative;
display: inline-block;
padding-bottom: 5px;
}
.title-line:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
border-radius: 5px;
background-color: #007bff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease-in-out;
}
.title-line:hover:before {
transform: scaleX(1);
}
```
在上面的代码中,我们将标题放在一个容器中,并给标题添加了一个自定义的类名title-line。我们使用了:before伪元素来实现标题下方的线条效果。我们将:before伪元素的position属性设置为absolute,bottom属性设置为0,left属性设置为0,将其宽度设置为100%,高度设置为5px,并将其border-radius属性设置为5px,使其有圆角效果。我们给:before伪元素设置了一个背景颜色,我们可以根据自己的需要来更改颜色。我们将其transform属性的值设置为scaleX(0),这样,线条就会被隐藏。当鼠标悬停在标题上时,我们使用:hover伪类来监听事件,并将:before伪元素的transform属性的值设置为scaleX(1),让线条显示出来。最后,我们使用transition属性来控制线条显示和隐藏的过渡效果。