pseudo-element相关内容

是否可以在表格行中使用伪元素(:after,:before)?

我想添加绝对定位的元素作为表格行的 :after(:before). 看看这个: table {边框:1px 虚线灰色;边框折叠:折叠;边框间距:0;TD{填充:0;边距:0;宽度:100px;背景:rgba(255, 0, 0, 0.2)}}table.a .special::before {内容:'a';}table.b .special::before {内容:'a';显示:块; ..
发布时间:2021-11-26 15:59:29 前端开发

是否可以在表格行中使用伪元素(:after,:before)?

我想添加绝对定位的元素作为表格行的 :after(:before). 看看这个: table {边框:1px 虚线灰色;边框折叠:折叠;边框间距:0;TD{填充:0;边距:0;宽度:100px;背景:rgba(255, 0, 0, 0.2)}}table.a .special::before {内容:'a';}table.b .special::before {内容:'a';显示:块; ..
发布时间:2021-11-25 08:33:36 C#

::after 伪元素出现在之前

我正在尝试在渐变的顶部和底部创建一个微妙的波浪.但是, ::after 伪元素出现在主要内容之前而不是之后.目前它显示为 ::before、::after、主要内容,但我希望它显示为 ::before、主要内容、::after. 这是我的代码: #gradient {背景:#0068a9;/* 对于不支持渐变的浏览器 */背景:-webkit-linear-gradient(rgba( ..
发布时间:2021-09-23 20:15:32 其他开发

有没有办法在伪元素 ::before 或 ::after 中使用 SVG 作为内容

我想在某些选定元素之前放置一些 SVG 图像.我正在使用 jQuery,但这无关紧要. 我希望 ::before 元素为: #mydiv::before {content: '';显示:块;宽度:22px;高度:10px;边距:10px 5px 0 10px;} 如果我像上面那样做,它只会显示字符串.我检查了规格,似乎对可以包含的内容有一些限制.是否 ..
发布时间:2021-09-01 19:11:09 其他开发

更改 的内容带有伪元素的元素</a> </h2> </header> <div class="arc-note gray">我想要什么 通过'::before'伪元素选择html'title'元素并将'content'属性应用于选择来更改html'title'元素的内容. 问题 我有一个网页: 一些标题 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:43:09</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346316.html" title="将伪元素居中 ">将伪元素居中</a> </h2> </header> <div class="arc-note gray">我想在原始 div 上设置一个 div 的伪元素. 问题是div的文字居中. 这是一个例子: #a:after{内容:“文字";位置:绝对;左:0;红色;} 文本 为什么伪元素不受div样式的影响? 解决方案 #a:after {内容:“文本";位置: ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:43:06</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346315.html" title="将 H1 文本包裹在 ::before 伪元素旁边 ">将 H1 文本包裹在 ::before 伪元素旁边</a> </h2> </header> <div class="arc-note gray">我有一个相当长的 H1 标题,其中包含一个带有伪 ::before 元素的链接,我想将其正确换行到两行.这是我需要的: H1 内a 链接上的伪::before 元素(它需要可点击,因此不能位于H1 上). 我成功地完成了这项工作. 要正常换行并与第一个单词的左侧对齐的文本. 这就是问题所在. 在此处查看我的测试代码笔:http://codepen.io/dmoz/pen/Ea ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:43:03</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346314.html" title="带有 ::before 和 ::after 的文本未正确居中? ">带有 ::before 和 ::after 的文本未正确居中?</a> </h2> </header> <div class="arc-note gray">所以我在伪 ::after 元素中有一些带有箭头的文本.箭头是一个 div,边框底部和边框右侧设置为 1px 实心.这是 CSS: #arrow::after {位置:相对;顶部:5px;内容: "";显示:内联块;宽度:30px;高度:30px;边框底部:1px纯白色;右边框:1px纯白色;变换:旋转(-45度);}#箭头:悬停{颜色:#404040;光标:指针;}#arrow:hover:: ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:43:00</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346313.html" title="::after 的 jQuery 悬停效果 ">::after 的 jQuery 悬停效果</a> </h2> </header> <div class="arc-note gray">当我将鼠标悬停在 div 上时,我会触发多种效果.问题是 div 也有伪元素 ::after,它使用内容 CSS 规则用虚拟元素(播放按钮)填充 div. 当我悬停 div 的任何部分而不是 ::after 元素所在的空间时,我的悬停效果会起作用. 简单地说,我想知道是否有办法使用 jQuery 指向 ::after 元素.我试图将 ::after 元素定义为一个名为“play"的变量 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:57</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346312.html" title="无法通过 ::before 在 div 内通过 xpath 获取元素 ">无法通过 ::before 在 div 内通过 xpath 获取元素</a> </h2> </header> <div class="arc-note gray">我需要使用网络驱动程序对象获取网络元素列表 findElements(By.xpath("")); 我通过使用 xpath 作为 //*[@class=\"providers-list clearfix\"] 来获取列表.但是,每当我尝试获取其中的元素时都会出现错误 ::before .. 这个 xpath 给了我错误: ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:54</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346311.html" title="如何从 graphQl 查询中获取变量到内联样式或样式组件中的伪元素中 ">如何从 graphQl 查询中获取变量到内联样式或样式组件中的伪元素中</a> </h2> </header> <div class="arc-note gray">我有一个似乎无法解决的难题我正在从 DatoCMS 的 graphQL 数据库中查询颜色,并想更改 Gatsby js 应用程序中伪元素的颜色我可以像这样使用常规选择器做到这一点 ${pricing.priceAmount} ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:51</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346310.html" title="如何使用百分比而不是像素将背景图像设置为伪元素? ">如何使用百分比而不是像素将背景图像设置为伪元素?</a> </h2> </header> <div class="arc-note gray">演示 关键css #tab-1:before {内容:"";显示:块;宽度:100%;高度:100%;背景: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") 不重复;顶部:10px;位置:相对;} 我想在使用伪 :before 后立即 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:48</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346309.html" title="你能阻止 :first-line 样式应用于 :after Opera 和 Chrome 中的元素吗? ">你能阻止 :first-line 样式应用于 :after Opera 和 Chrome 中的元素吗?</a> </h2> </header> <div class="arc-note gray">在 Chrome 和 Opera 中,似乎 :first-line 规则也适用于 :after 伪元素,并且不能被 !important 或普通 CSS 权重覆盖. 例如,我对像这样的 H2 元素有一系列规则(jsfiddle here) CSS h2.dotted {位置:相对;字体大小:20px;}h2.dotted.first:第一行{字体大小:30px;}h2.dotted:后{ ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:45</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346308.html" title="具有伪类的全宽背景元素 - z-index? ">具有伪类的全宽背景元素 - z-index?</a> </h2> </header> <div class="arc-note gray">编辑:我发现当我删除父元素的 z-index 时它可以工作.无论如何......有没有一种不那么“hackish"的方式来完成这一切?它有效,但真的感觉很hackish. 我尝试在居中的 50% 行后面制作一个全宽伪元素.它工作正常(尽管代码看起来很hackish)但我无法在其父元素后面获取伪元素 z-index : > 在这里访问 codepen-battleground. 这 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:42</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346307.html" title="同一字符串的两个不同部分的不同字体系列 ">同一字符串的两个不同部分的不同字体系列</a> </h2> </header> <div class="arc-note gray">.my-link::after {内容:“文本\2661";字体系列:Arial、sans-serif;} 看看上面的代码,我需要为伪元素的内容设置字体系列.那不会有问题. 但我需要将 text 部分的字体系列设置为 Arial,将 \2661 部分的字体系列设置为 Helvetica. 对于同一字符串的不同部分,基本上是两种不同的字体系列. 有没有办法只用 CSS 或 Sas ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:39</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346306.html" title="带有伪选择器和对齐的自定义 ul 项目符号 ">带有伪选择器和对齐的自定义 ul 项目符号</a> </h2> </header> <div class="arc-note gray">我用伪选择器为 ul 制作了一个自定义项目符号.但我希望链接文本位置在内部对齐.我怎么做?这是 Fiddle http://jsfiddle.net/bodyfarmer/13q91433/1/ 的链接 CSS: ul {/* 列表样式位置:外面;*/底边距:0;padding-left: 20px;padding-right: 30px;列表样式:无;}李:之前{内容:“\00BB";p ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:36</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346305.html" title="::selection 伪元素轮廓属性 ">::selection 伪元素轮廓属性</a> </h2> </header> <div class="arc-note gray">在这个参考 在说明的底部, 他们声明 ::selection 选择器可以使用 outline 属性,但我无法让它工作. 如何使用此选择器正确影响outline? 解决方案 Mozilla 开发者网络: ::selection 伪元素目前不在标准轨道上的任何 CSS 模块中.不应在生产环境中使用. 哪个浏览器支持这个伪元素上的哪些属性在今天基本上无关紧要.您可能 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:33</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346304.html" title=":checked 伪类选择器不适用于 CSS ">:checked 伪类选择器不适用于 CSS</a> </h2> </header> <div class="arc-note gray">我正在尝试使用 :checked 伪类仅使用 css 来显示/隐藏图像.控制台没有显示错误,但我无法在单击复选框时看到图像. HTML 代码: ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:30</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346303.html" title="为什么默认情况下文本节点呈现在其父级 ::before 下方? ">为什么默认情况下文本节点呈现在其父级 ::before 下方?</a> </h2> </header> <div class="arc-note gray">在写一个关于 SO 的不同问题的答案时,我做了这个片段: @import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');/* 相关的 CSS */div {位置:相对;}div::before {内容: '';位置:绝对;顶部:0;左:0;}div>跨度{位置:相对;z-索引:0;}/* 休息只是造型 - ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:27</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <article class="arc-box pd-1"> <header> <h2 class="arc-title"> <a target="_blank" href="/2346302.html" title="右对齐 CSS 之前:数字? ">右对齐 CSS 之前:数字?</a> </h2> </header> <div class="arc-note gray">我想在不使用有序列表的情况下对段落进行编号.我试图通过在 CSS 中使用 content:counter(paragraph) 来实现这一点,这样我创建的每个段落块都会在它的左侧生成一个数字. .pass {反复位:段落;}.pass p:before {内容:计数器(段落);位置:绝对;字体大小:0.6em;颜色:#999;左边距:-3em;反增:段落;} 它工作正常,但问题是我不知道如何对 ..</div> <div class="arc-meta gray"> <span>发布时间:2021-06-22 20:42:24</span> <span><a class="dark font-1" href="/category/other-dev">其他开发</a></span> </div> </article> <div class="pd-1"> <div class="container-fluid text-center"> <ul class="pagination"> <li class="disabled"><a>首页</a></li> <li class="disabled"><a><</a></li> <li class="active"> <a href="#">1</a> </li> <li class=""> <a href="/tag/pseudo-element/page/2">2</a> </li> <li class=""> <a href="/tag/pseudo-element/page/3">3</a> </li> <li class=""> <a href="/tag/pseudo-element/page/4">4</a> </li> <li class=""> <a href="/tag/pseudo-element/page/5">5</a> </li> <li class=""> <a href="/tag/pseudo-element/page/6">6</a> </li> <li class=""> <a href="/tag/pseudo-element/page/7">7</a> </li> <li class=""> <a href="/tag/pseudo-element/page/8">8</a> </li> <li><a href="/tag/pseudo-element/page/2">></a></li> <li><a href="/tag/pseudo-element/page/17">尾页</a></li> </ul> </div> </div> </div> </div> <div class="side"> </div> </div> </div> <footer class="footer"> <div class="container"> <section class="copyright-section"> <a style="color:#818394;" href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2021 <a style="text-decoration:none;color:#818394;" href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" style="color:#818394;text-decoration:none;" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" style="color:#818394;text-decoration:none;" target="_blank" title="站点标签">站点标签</a> <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=31763373%40qq.com" style="color:#818394;text-decoration:none;"><i class="glyphicon glyphicon-envelope"></i>意见&反馈</a> <a style="color:#818394;text-decoration:none;" target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a style="color:#818394;" href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </footer> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://static.it1352.com/Scripts/base.js"></script> </body> </html>