href不适用于包含:after content:''"；

href是HTML中的一个属性，用于指定链接的目标地址。它通常用于<a>标签中，通过点击链接可以跳转到指定的网页或资源。

然而，href属性不适用于包含:after content:''的情况。:after是CSS中的伪元素，用于在选定元素的内容之后插入新的内容。content:''是其中的一个属性，用于指定插入的内容为空。

由于href属性是用于指定链接目标的，而不是用于插入内容，因此在包含:after content:''的情况下，使用href属性是不合适的。

如果需要在选定元素的内容之后插入新的内容，可以使用其他CSS属性或伪元素来实现，例如使用content属性或:before伪元素。

需要注意的是，以上回答是根据提供的问答内容进行的解答，如果有其他相关问题或需要更详细的解答，请提供更具体的信息。

相关·内容

使用这些 CSS 属性选择器来提高前端开发效率！

} a[href^="http://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content...a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg...); } a[href$="odf"]:after { content: url(open-office-icon.svg); } 你还可以通过叠加属性选择器来确保这些图标只出现在可下载链接上。...a[href]:after { content: " (" attr(href) ") "; } 自定义提示使用属性选择器创建自定义工具提示既有趣又简单： [title] { position...a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); } 诊断这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题

2.2K5 0

前端开发需要知道的一些 CSS 属性选择器！

1.8K2 0

【CSS】1049- 深入了解::before 和 ::after 伪元素

1.png content属性 1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。...a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */ } 百度地址... 复制代码 b.png a::after{ content: "【" attr(href) "】"; } 百度地址... 复制代码 url()/uri() 用于引用媒体文件。...a::before{ content: url("img/baidu_jgylogo3.gif"); } a::after{ content:"("attr(href)")"; } <

9972 0

要提升前端布局能力，这些 CSS 属性需要学习下！

1.5K3 0

利用属性选择器对外部链接进行样式设计

属性包含指向外部网站的链接时，我们想要应用样式。...a[href^='http']::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...如果我们想将图标应用于任何外部链接，而不考虑字体大小（例如标题），我们可能更适合使用 background-image 属性。...a[href^='http']::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left...a[href^='http'] { padding-right: 1.25em; } a[href^='http']::after { position: absolute; content

1201 0

初探css3

[id=article]{ 　　　　　　color:red; 　　　　} 　　2.包含匹配选择器。包含有指定的字符串。　　　　...} 　　2.after 伪类元素选择器，主要作用是在选择某个元素之后插入内容。　　　　　　...语法：元素标签:after{ 　　　　　　　　　　content:"插入的内容" 　　　　　　} 　　　　　　p.after{ 　　　　　　　　content:"文字" 　　　　　　...背景　　1.background-size 用于设置背景图片的大小。　　　　...3.backrground-origin 用于指定background-position 属性的参考坐标起始位置。

5589 0

利用JavaScript获取浏览器计算后的样式

哪些样式是属于浏览器计算后的样式要检测标签的样式有包含在头部书写样式、标签内联样式和外部的样式，即浏览器计算后的样式。...getComputedStyle(element[, pseudoElt])方法 element用于计算样式的标签;pseudoElt可选指定一个伪元素进行匹配。对于常规的元素来说可省略。...html> HTML5Course - 梦幻雪冰 <link rel="stylesheet" href...")["content"]); console.log(window.getComputedStyle(box, "after")["background-color"]); // 注意...")["content"]); console.log(document.defaultView.getComputedStyle(box, "after")["background-color

9385 0

CSS3伪类和伪元素的特性和区别

伪类 - pseudo classes 首先看看CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。单单看定义完全不懂在讲什么。...#tab1">标签一标签二标签三 <...简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。...举个综合使用伪类和伪元素的栗子： q:lang(de)::after{ content: " (German) "; } q:lang(en)::after{ content: " (English...::after{ content: " (Unrecognized language) "; } 以上代码通过伪类"lang获取不同lang属性的节点，并为之设置伪元素::after，伪元素的内容是此节点的语言类型

1K9 0

CSS3伪类和伪元素的特性及两者的区别

伪类 - pseudo classes 首先看看CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。单单看定义完全不懂在讲什么。...#tab1">标签一标签二标签三 <...document (e.g., the ::before and ::after pseudo-elements give access to generated content)....简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。...举个综合使用伪类和伪元素的栗子： q:lang(de)::after { content: " (German) "; } q:lang(en)::after { content: "

7052 0

第13天：页面布局实例-博雅主页

1、相对定位：相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。...绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。...Verdana,"\5b8b\4f53";*/ 40 color:#666; 41 background:#fff 42 } 43 .clearfix:before,.clearfix:after...{ 44 content:""; 45 display:table; 46 } 47 .clearfix:after{clear:both;} 48 .clearfix{ 49...ul .last{ 136 margin-right: 0; 137 width:217px; 138 } 139 .content ul img{ 140 width:100%; 141

6131 0

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content...: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码会在#example元素内容之前插入一个...除了插入文字内容，还可以指定其他内容： p:before { content: url('img.jpg'); } a:after { content: attr(href); } attr...both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。...:after { content:""; display:table; } .clearfix:after { clear:both; } /* For IE 6/7 (trigger

1K1 0

CSS选择器

元素还可以包含其他元素。这种情况下，父元素的内容盒子称为子元素的块容器，通常成为容器。 ?...[attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...[attribute*=value] 匹配属性值中包含指定值的每个元素。示例：元素属性选择器 <!...示例：使用:before和:after选择器 <!...: "请"; } a:after { content: "!"

1.4K5 1

CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画

-- 按钮 --> 关注收藏投币点赞评论转发 CSS: /* 清除浏览器默认边距，使边框和内边距的值包含在元素的height和width...实现按钮右边的线 */ .container a::after { content: ""; position: absolute; right: -20px; top:

1.1K2 0

CSS 伪元素的一些罕见用例

此外，它还可以用于扩展卡片组件的可点击区域，该组件具有查看更多链接的功能。请注意，文章的内容(如标题和图像)将位于伪元素之上，因此它不会影响文本的选择或图像的保存。 ?...添加伪元素然后，我为每个元素添加了:before和:after伪元素，其宽度为50％（为了更好的演示，我为每个元素添加了不同的背景） .elem:before, .elem:after { content...基于文件扩展名的链接样式例如，如果有一个包含PDF文件的链接，则可以添加PDF图标，以使其对用户更清晰。...Doc CSS a[href$=".pdf"]:before { content: ""; display: inline-block; vertical-align: middle...HTML Or CSS p { display: flex; align-items: center; } p:before, p:after { content: "";

8184 0

AdminLTE实现局部刷新

由于修改了原生adminlte.js部分，可能不适用于所有布局，此处暂且以原生布局情况下为例，同时暂且仅对二级菜单做了局部刷新，未处理一级菜单包含链接时的状态。 ? 正文效果图如下: ?...此处根据是否包含fa-circle-o该class区分，以便区别对待。其中，当为二级菜单时调用mainMenuClickFunc方法处理局部刷新事件，代码如下： Tree.prototype....}else { that.toggle($(this), event) } }) } 2、mainMenuClickFunc 这是一个用于处理二级菜单时的方法...offsetParent().addClass("active"); } var controller = $(this).attr("menu-controller"); $(".content-wrapper...param:{}, success: function (d) { var html = $(d); $(".content-wrapper

3.1K2 0

你会用::before、::after吗 ::before和::after伪元素的用法

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。...二、content属性 ::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。... a::after{ content: "(" attr(href) ")"; } <a href="http://www.cnblogs.com...3、url()/uri() 用于引用媒体文件。举例：“百度”前面给出一张图片，后面给出href属性。...]:after { content: " (" attr(href) ") "; } } 百度</

3.6K1 0

CSS基础语法(二) CSS的9种选择器

属性选择样式应用的元素 #id值{ … } 3.标签选择器根据HTML标签选择样式应用的属性标签名{ … } 4.子选择器 .food>li{ border:1px solid red; } 5.包含选择器....first span{color:red;} 6.通用选择器 * {color:red;} 7.伪类选择器 1、静态伪类(只应用于超链接) [注意]visited伪类只能设置字体颜色、边框颜色、outline...a:visited{color: green;}　　设置超链接在其链接地址已被访问过时的样式 2、动态伪类(可应用于任何元素) 设置超链接在其鼠标悬停时的样式。...若写成 p:before em 就是不合法的 p:before{content:"text"} 　　4、:after 在元素内容后面插入内容　　默认这个伪元素是行内元素，继承元素可继承的属性 p:after...{content:"text"} 9.属性选择器属性选择器根据元素的属性及属性值来选择元素 1、简单属性选择器 a[href][title]{color: red;} #div[class]{color

9933 0

关于typecho的一些样式代码

> 批量替换文章内容中的旧地址修改网站地址后，会有好多附件地址不变，附一个SQL语句，应用于phpmyadmin，批量修改： UPDATE `typecho_contents` SET `...->archiveTitle(array( 'category' => _t('分类 %s 下的文章'), 'search' => _t('包含关键字...= prefix_insert_after_paragraph( $ad_code, 2, $archive->content );; } } // 插入广告所需的功能代码 function...prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) { $closing_p = ''; $paragraphs...> 注：这样就会输出一个new的文字，可应用于class里，然后，自定义输出背景图片等。 > ↩

1.3K2 1

前端学习(15)~css3学习(九)：选择器详解

匹配含义： ^：开头 $：结尾 *：包含格式： E[title] 选中页面的E元素，并且E存在 title 属性即可。...E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。...伪元素选择器伪元素选择器的标志性符号是 :: 1、格式：（第一部分） E::before 设置在元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。...E::after 设置在元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 E:after、E:before 在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。...新版本里，E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。举例： <!

5052 0

CSS 属性选择器的深入挖掘

img[title][class~=logo]{ ... } 伪正则写法 i 参数忽略类名的大小写限制，选择包含 class 类名包含子字符串为 text，Text，TeXt......]::before { content: attr(desc1); } [desc2]::after { content: attr(desc2); } [desc1]:hover:...a[href^="http:"]:hover::before { content: "这是一个http链接"; ... } a[href^="https:"]:hover::before...a[href$=".ppt" i]::before { content: "ppt"; background: #f8e94f; } a[href$=".pdf" i]::before...{ content: "pdf"; background: #fb807a; } a[href$=".mp3" i]::before { content: "mp3";

9793 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云