写一个有hover::before和hover::before的HTML和css代码
时间: 2024-02-18 09:04:59 浏览: 18
HTML代码:
```html
<div class="box"></div>
```
CSS代码:
```css
.box {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.box::before {
content: "";
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.box:hover::before {
border-right-color: #f00;
}
```
上面的代码中,使用 `::before` 伪元素在 `.box` 元素的左侧创建了一个三角形,当鼠标悬浮在 `.box` 元素上时,利用 `:hover` 伪类和 `transition` 属性实现了三角形颜色从黑色到红色的渐变效果。
相关问题
写一个有hover::before的HTML和css代码
HTML代码如下:
```
<div class="box">Hover me</div>
```
CSS代码如下:
```
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
color: #fff;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.box:hover::before {
opacity: 0.5;
}
```
这段代码实现了鼠标悬停在 `.box` 元素上时,会在其上方叠加一个半透明的黑色图层。这个黑色图层是通过使用伪元素 `::before` 来实现的,并且使用 CSS 动画来实现渐变的效果。
写一个有hover::before和hover::after的HTML和css代码
HTML代码:
```html
<div class="box"></div>
```
CSS代码:
```css
.box {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.box::before {
content: "";
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.box::after {
content: "";
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.box:hover::before {
border-right-color: #f00;
}
.box:hover::after {
border-left-color: #f00;
}
```
上面的代码中,使用 `::before` 和 `::after` 伪元素在 `.box` 元素的左侧和右侧分别创建了两个三角形,当鼠标悬浮在 `.box` 元素上时,利用 `:hover` 伪类和 `transition` 属性实现了两个三角形颜色从黑色到红色的渐变效果。