CSS :悬停文本装饰:下划线在Safari上不起作用
CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。它可以控制网页的字体、颜色、大小、间距、背景等各种样式效果。在网页开发中，CSS起到了非常重要的作用，可以使网页更加美观、易读和易维护。
悬停文本装饰是指当鼠标悬停在文本上时，给文本添加一些特殊的装饰效果，比如下划线、颜色变化等。然而，在Safari浏览器上，下划线在悬停时可能不起作用的问题是一个已知的兼容性问题。
解决这个问题的方法有多种，以下是一些常见的解决方案：
- 使用text-decoration属性：可以通过设置text-decoration属性为underline来给文本添加下划线效果。例如：
a:hover {
text-decoration: underline;
}- 使用border-bottom属性：可以通过设置border-bottom属性来给文本添加下划线效果。例如：
a:hover {
border-bottom: 1px solid;
}- 使用伪元素::after：可以通过添加伪元素::after来模拟下划线效果。例如：
a:hover::after {
content: "";
display: block;
border-bottom: 1px solid;
}以上是一些常见的解决方案，具体使用哪种方法取决于具体的需求和情况。在实际开发中，可以根据需要选择最适合的方法。
腾讯云提供了一系列云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务信息。
相关·内容
这是我的css：
.nav {
margin: 0px;
padding: 0px;
list-style: none;
display: table;
width:100%;
text-align: center;
position: relative;
}
.nav li {
display: table-cell;
}
.nav li a {
background: #FF0000;
color: #fff;
display: block;
padding: 7px 8px;
text
浏览 5提问于2014-09-03得票数 0
回答已采纳
是否可以在不显示伪元素的下划线文本装饰的情况下将a:在由CSS的伪元素之前添加到A标记中？
在下面的标记中，在鼠标上正确加下划线的链接左侧添加了一个"+“符号，但是即使css规则设置为"h3 a: even :悬停{文本装饰:无；}”，伪符号"+“也会加下划线。
<style>
h3 {
display:block;
margin:20px auto;
padding:6px;
width:85%;
text-align:left;
font: 21px 'lucida sans'; color
浏览 9提问于2013-12-05得票数 12
4回答
我不知道如何禁用悬停效果。我正在使用来自的导航元素，使用我自己的自定义css。一切都很好，这意味着我可以得到我想要的边界，并在边界上悬停效果(边界从灰色变成红色，当我悬停在家)。但它仍然强调文本本身，我不希望这种情况发生在我的导航。
<nav className="ink-navigation">
<ul className="menu horizontal">
<li><a href="#"><span classNam
浏览 1提问于2016-06-16得票数 2
如何才能使下划线只适用于a元素，而不应用于“后”的内容？
在下面的CSS中，可以控制一个:后置元素的颜色:悬停。然而，文字装饰不能改变。
下面是用来说明这个问题的小提琴手：
下面是CSS：
a {
color: green;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:after {
font-family: FontAwesome;
content: "\f061";
}
a:hover:after {
浏览 6提问于2015-05-28得票数 3
回答已采纳
下面是我的代码：(请运行下面的代码片段)
.hover-underline-animation {
display: inline-block;
position: relative;
font-size: 22px;
text-decoration: none;
color: #333;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
浏览 4提问于2021-10-16得票数 0
回答已采纳
我在这里学习了一些教程，
并制作了一个很好的动画悬停导航列表项目。
下面是HTML：
<div id="nav">
<ul id="navbar">
<li><a href="#" data-hover="Home">Home</a></li>
<li><a href="#" data-hover="About">About</a></li>
浏览 3提问于2016-01-04得票数 6
回答已采纳
3回答
覆盖链接样式
、、
我的CSS看起来像这样：
A:link { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:visited { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:active { text-decoration: none; color: White; border-bottom:1px dotted white; font-sty
浏览 0提问于2011-11-04得票数 2
回答已采纳
2回答
尽管text-decoration是none，但在鼠标悬停上应用text-shadow似乎显示了不可见下划线的阴影(仅Chrome，Firefox )。。
HTML：
<a class="bill-area" href="#" title="Watch">
<div class="watch"><h2>Watch</h2></div>
</a>
CSS：
a {color:#00C; text-decoration:n
浏览 0提问于2012-04-02得票数 0
2回答
使border-bottom在悬停时消失。
<a id="toggle" href="#modal0">living in New York,</a>
#toggle {
transition: all .3s ease-out;
position: relative;
}
#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- d
浏览 2提问于2015-08-23得票数 0
回答已采纳
我希望有一个链接，看起来就像纯文本，除了光标，使用尽可能少的css。
问题是：<a>有蓝色(在悬停时会变暗)，在悬停时也有下划线。我希望它看起来像纯文本(黑色没有下划线)。
通过使用Bootstrap类“文本-黑暗”，我设法去掉了蓝色。但是，如何在不编写css的情况下消除下划线(文本修饰)？
.no-underline:hover {
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c
浏览 0提问于2018-04-03得票数 16
回答已采纳
当我悬停在文本上时，文本和css图标都会被触发。
但是，当我悬停在css图标上时，当图标和文本都应该和前面的实例一样时，只会触发css图标。
我的jQuery有什么问题，它不能双向工作？
html
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span class="twitter-underline-1">Just some filler text&l
浏览 2提问于2014-12-24得票数 0
回答已采纳
2回答
我正在制作一个网站：。在菜单中，我有一个下划线，当一个特定的菜单是活动的，或者你悬停在菜单选项上。
我希望从菜单文本到下划线有一些px空间。那件事怎么可能？
我试图设置一个border-bottom:1px solid white，但这对我来说并不管用。
下面是下划线上的CSS：
.wpmega-black-white .wpmm-mega-wrapper > li:hover,
.wpmega-black-white .wpmm-mega-wrapper > li.current-menu-item {
text-decoration: underline;
ma
浏览 0提问于2018-02-13得票数 1
回答已采纳
1回答
我试图模仿此菜单的外观，但修复了错误。：
当你将鼠标悬停在“主页”上，然后移动到“项目组合”，一个下划线就会出现在“项目组合”下面。但是当你从“联系人”转到“公文包”时，下划线不会出现。在我的版本中，我也不能很好地从"portfoilo“转到它的子项，因为子项会消失。我没有这个页面的代码，因为它是Weebly的，但我尝试在这里重现它：
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="home.css&
浏览 6提问于2013-01-03得票数 0
1回答
我正在尝试css中锚标记的伪代码，即链接、访问、悬停和活动。html是：
<a href="https://www.w3schools.com/html/" target="_blank">
w3school
</a>
css是：
a:link {
color: blue;
text-decoration: overline underline;
}
a:visited {
color: green;
text-dec
浏览 1提问于2019-10-23得票数 3
回答已采纳
2回答
嗨，我正在做一个个人博客，在有一个帖子列表的页面上，当访问者试图点击一个帖子名时，我想在文本下划线。
当他们悬停带有类"entry“的div标记时，如何使div标签下的文本带有下划线？
以下是指向jsfiddle 的链接
.entry{
display:block;
box-sizing:border-box;
border-bottom:1px dotted black;
padding:0;
height:1rem;
margin-bottom:1rem
}
.entry:hover {
text-decoration:
浏览 3提问于2021-05-06得票数 0
回答已采纳
3回答
我在两个使用inline-block的跨度上遇到了text-decoration: underline问题。问题是，悬停时只有一部分URL会加下划线，而另一部分则不会。我需要保留display属性，否则将无法应用text-overflow (参见：)
HTML：
<div class="details" itemscope itemtype="http://data-vocabulary.org/Product">
<h2>
<a class="heading" href="/
浏览 1提问于2013-05-30得票数 6
回答已采纳
4回答
我正在尝试制作一个具有白色下划线的输入组件。当前，当用户悬停在组件上时，下划线颜色将变为黑色。我希望这是白色的。我相信这应该是可能的，通过重写下划线类，在演示和概述如下。不幸的是，它似乎不起作用，但是如果我在浏览器中手动检查样式并删除下面的一行，它在浏览器中就会像预期的那样工作。
示例： (视图：)
在浏览器中手动删除样式以获得所需的功能：
.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
border-
浏览 3提问于2018-06-06得票数 12
回答已采纳
1回答
悬停下划线未显示
、、
我试图创建一个导航条，在每个元素下下划线的效果时，悬停在上方。由于某些原因，悬停效应没有出现，我不知道是我的代码错了，还是浏览器错了，我不知道如何修复它。问题是".underline_indicators“类
我遵循最新的freeCodeCamp课程来创建一个网页设计系统，严格遵循代码，但它仍然没有工作。任何帮助都是非常感谢的！
下面是我的代码片段：
ul{
display: flex;
list-style: none;
}
a {
color: black;
text-decoration:
浏览 1提问于2022-02-17得票数 2
回答已采纳
在这个问题上，我一直在碰壁。我已经尝试使用这行代码在使用Elementor的CSS中创建悬停效果的下划线。我已经用一个按钮小部件和一个文本编辑器小部件试过了，但似乎根本不能让它工作。我遗漏了什么？任何帮助都是非常有帮助的。 谢谢 :
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
浏览 72提问于2021-08-05得票数 0
使用HTML和CSS，而不是JS，我如何改变标题文本的位置、文本颜色和背景颜色？我想将标题文本放在链接文本的中点以下。
a:link {text-decoration: none;
color: #000;
border-bottom: 2px solid #f00; }
a:hover, a:active
{text-decoration: none;
color: #f00;
border-bottom: 2px solid #f00; }
a:visited {text-decoration: none;
color: black;
border-bottom: 2px so
浏览 2提问于2017-02-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
