造型电话链接
我们可以使用一点 CSS 来设置电话链接的样式。
让我们看一个使用 CSS color 属性为链接添加颜色的示例。
为电话链接添加颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
color: #ff2121;
text-decoration: none;
}
</style>
</head>
<body>
<a href="tel:+05890000111">0-589-0000111</a>
</body>
</html>
在我们的下一个示例中，我们将使用 CSS ::before 伪元素和 content 属性在电话号码之前添加一个电话字符。
在电话链接前添加电话字符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a[href^="tel:"]:before {
content: "0e";
margin-right: 10px;
}
</style>
</head>
<body>
<a href="tel:+012340000111">0-1234-0000111</a>
</body>
</html>
电话链接是我们在支持电话的设备上点击以拨打号码的链接。
当然，有些设备能够识别电话号码并自动提供链接，但并非总是如此。
在下面的示例中，我们在 HTML <a> 标记中使用 :tel。
请注意， tel: 很像一个协议，而不是一个功能。
添加电话链接的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<a href="tel:+08860000111">0-886-0000111</a>
</body>
</html>
这个协议处理程序没有任何关于链接的文档（官方）。
这就是浏览器支持和行为可能存在差异的原因。
通常，浏览器会做出不同的决定来决定如何处理点击的链接。
日期：2020-06-02 22:15:05 来源：oir作者：oir