如何不将悬停效果应用于：before中添加的内容？的CSS
麦克风
我在：before属性中添加'>'到链接，但是当应用：hover效果时也要采用样式， text-decoration: underline;因此，我需要不要在：before中添加的内容中应用效果，我试图解决此问题选项
a:before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
pointer-events: none;
}
a:before:hover {
content: '>';
pointer-events: none;
}
a:before:hover {
text-decoration:none;
}
但没有办法。
这就是链接与悬停的行为方式
这是我的代码示例，结构，<a>里面<p>是因为内容来自文本编辑器
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
left: 0px;
display: flex;
position: relative;
left: 0;
display: flex;
text-decoration: none;
}
a::before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
}
a:hover{
text-decoration:underline;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div> 蓬松的小猫
如果无法正常工作，您的代码中有两件事会停止：
- 主要原因是使用
display:flex - 您也有不正确的订单，
:hover:before但这没关系，因为display:flex无论如何它都无法工作。
对于a元素的默认显示，文本下划线不会影响使用:before伪元素添加的内容。但是，使用display:flex更改将改变其显示方式，并导致将文本下划线添加到添加的内容a:before 以及链接文本中：
工作示例：
更新：满足您对长链接上缩进的新新要求，并且无法更改HTML。
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
position: relative;
text-decoration: none;
display: block;
padding-left: 15px;
}
a:before {
content: '>';
position:absolute;
left:0;
top: 0;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:hover:before{
text-decoration:none;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'><span>This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link</span></a>
</p>
</div>另外，仅供参考，使用:hover和:before在一起的正确方法是:hover:before，但是在这种情况下，使用时并没有什么不同，display:flex如下所示：
例如使用正确的CSSa:hover:before 用 display:flex（正如你可以看到它不工作）：
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
left: 0px;
display:flex;
position: relative;
text-decoration: none;
}
a::before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
text-decoration:none!important;
}
a:hover{
text-decoration:underline;
}
a:hover::before {
text-decoration:none!important;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何不将运算符应用于Julia中的所有矩阵元素？
- 2
不将CSS应用于div
- 3
如何在div上添加图像而不丢失CSS悬停效果中的先前内容
- 4
使用CSS仅将悬停效果应用于图像的非透明部分
- 5
如何不将skrollr js属性应用于另一个div内的div？
- 6
将悬停效果应用于多个li
- 7
将悬停效果应用于多个li
- 8
不要将悬停效果应用于父级
- 9
JavaFX CSS：当父节点悬停在子节点上时，将悬停效果应用于子节点
- 10
将transitionSet应用于Fragment内容过渡中的单个View会产生重复的view效果
- 11
如何将CSS应用于Javascript添加的元素
- 12
CSS网格不将样式应用于内部子项
- 13
将CSS中的样式应用于新添加的元素
- 14
将CSS中的样式应用于新添加的元素
- 15
全局资源不将样式应用于xaml中的控件
- 16
如何将CSS应用于除悬停元素之外的其他元素？
- 17
如何在父悬停时将 css 变换应用于子项
- 18
如何使CSS应用于父容器中的图标？
- 19
如何使用LEADTOOLS 19将图像效果应用于内存缓冲区中的JPEG
- 20
在React中打开模态时如何将模糊效果应用于背景？
- 21
如何基于ViewModel中的值将条件效果应用于按钮？
- 22
将CSS悬停应用于多个组件
- 23
如何将模糊效果应用于nsview / nswindow？
- 24
如何将淡入效果应用于功能？
- 25
如何在Android中将波纹效果应用于BottomSheets
- 26
如何在Android中将波纹效果应用于BottomSheets
- 27
如何仅将变换效果应用于框阴影
- 28
将效果应用于页面中的许多ID
- 29
如何不仅仅基于媒体宽度/高度将不同的CSS应用于移动设备
我来说两句