pseudo-element 相关问题

CSS伪元素允许在元素内增强内容显示或者为元素生成额外的开始或结束内容的能力。

当我停止按下 :active css 时动画就会剪切

我一直在设计一个按钮，然后你按下，然后出现一个::after，内容为“复制！” 好的，当 ::after 出现时有一个动画，该动画通过 :active 属性触发...

html css events pseudo-element

回答 1 投票 0

在伪元素上添加 CSS 类

我想知道是否有办法向伪元素添加 CSS 类，例如 :after。我想使用 :after 附加错误消息。我还希望错误消息的样式与 ot 相同...

css pseudo-element

回答 2 投票 0

使我的 h2 边框底部仅在文本而不是 div 下划线

我想制作 h2:after 的边框底部来填充文本而不是 div。这是我的代码： .text_box{ 保证金：0 自动；宽度：355px；背景：红色； } 小时2{ 边距：0 自动；...

html css pseudo-element

回答 4 投票 0

CSS数据属性换行符&伪元素内容值

数据属性中是否可以换行？我正在尝试做这样的事情： CSS： [数据-foo]：{之后内容：attr(data-foo); 背景颜色：黑色； } 超文本标记语言数据属性中是否可以换行？我正在尝试做这样的事情： CSS： [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</div> 我发现“”是CSS中的新行，但对我来说仍然不起作用。这就是它的工作原理。您需要按如下方式修改您的数据属性： [data-foo]:after { content: attr(data-foo); background-color: black; color: white; white-space: pre; display: inline-block; } <div data-foo='First line 
 Second Line'>foo</div> 小提琴演示：http://jsfiddle.net/audetwebdesign/cp4RF/ 如何运作使用 \a 不起作用，但等效的 HTML 实体可以，
。根据CSS2.1规范，attr(attribute-label)返回一个字符串，但该字符串未被CSS处理器解析（我不确定这到底意味着什么）。我推测 \a 必须由 CSS 处理器解释才能显示代码属性。相比之下，HTML 实体由浏览器直接解释（我猜......），因此它似乎可以工作。但是，为了使换行正常工作，您需要设置 white-space: pre 以保留伪元素中的空白。注意：您也可以根据内容的性质考虑 pre-wrap 或 pre-line。参考关于获取换行符的 HTML 实体代码： http://www.fileformat.info/info/unicode/char/000a/index.htm 关于 attr() 属性的 content 值： http://www.w3.org/TR/CSS2/generate.html#content 您可以在属性值内使用普通换行符： <div data-foo="First line Second Line">foo</div> 浏览器在这方面一直存在bug，并且HTML规范对此还不是很清楚；他们讨论了元素 content 中换行符的含义（它们相当于空格），但没有讨论属性值中的换行符。在 HTML5 CR 中，属性值的解析规则明确表示，换行符只是添加到属性值中。现代浏览器通常遵循这样的规则。但是，当您通过 attr(...) 在 CSS 中使用该值时，换行符通常会被视为等同于空格，因此您需要将伪元素上的 white-space 设置为支持换行符的值，即 pre、pre-wrap 或 pre-line。附注在 HTML 中，符号 \a 只是两个数据字符，没有特殊含义。符号 
 表示换行符（具体来说，换行符），但它仅相当于源中的实际换行符。在工具提示中添加新行 <tr> <td>RFC</td> <td> <span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML journey 
BU001: DPDs in Bureau, Low score and related issues 
BU002: Presence of default qualifiers 
INC001: Low reported Income 
INC002: Low Income as per SMS 
INC003: Low Income as per Bank Statement 
EL001: Eligibility less than defined 
M001: Name match failed in KYC 
M002: Name match failed in Telco 
M003: Name Match failed in Address proof 
M004: Face match failed 
M005: Distance match failed 
M006: No Local address found"> <span th:if="${user.rfc != null}" th:text="${user.rfc}"></span> </span> </td> </tr> 在 CSS 中 span[data-descr] { position: relative; text-decoration: underline; color: #00F; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } .rcftip:after { content: '\A'; white-space: pre; word-wrap: break-word; } 结果：带有新行的工具提示对于任何使用 svelte（也许是 vue）之类的框架的人，请注意，您不应该在代码库中声明显式的 
 字符，因为它在编译期间不会按原样处理。相反，只需声明一个 \n 字符，确保它被引用/视为变量。例如： data-tooltip={"Line one\nLine two"} 随着 [data-tooltip]:after { content: attr(data-tooltip); background-color: black; color: white; white-space: pre; display: inline-block; } ...如果您想弄清楚这一点并且碰巧使用 HAML 和 AngularJS，那么请使用 \n。 %a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "} 结果： Cost Per Unit: $10.54 (Calculated for applicable Feature Qty.) 好的，这是一种简单的方法。你应该把它写成 data-foo='First line </br> Second Line' 和您可以使用 .html()，而不是使用 .text()。当您使用 .html() 时，它将作为换行符，这应该可以解决您的问题。

html css newline pseudo-element css-content

回答 6 投票 0

为什么<mat-pseudo-checkbox>自动创建

我们最近从 v15 迁移到 Angular 17。对于中的所有下拉菜单，都会自动创建，并且会看到所选选项的刻度线。有人可以建议如何删除这些伪代码吗

checkbox angular-material migration pseudo-element mat-select

回答 1 投票 0

HOC 图像悬停组件未使用 Tailwind CSS 定位伪元素

我正在使用 Astro 和 Tailwind CSS。为什么以下不起作用？我有这个 HOC HoverScale.astro 组件： // HoverScale.astro 我正在使用 Astro 和 Tailwind CSS。为什么以下不起作用？我有这个 HOC HoverScale.astro 组件： // HoverScale.astro <span class="[&>img]:lg:group-hover:scale-10 group [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <slot /> </span> 我在另一个组件中使用它，例如： <a href="foo"> <HoverScale> <Picture src={url} alt={title} /> </HoverScale> </a> 此图片组件呈现一个 <img /> 标签。当我直接在图片组件上添加 Tailwind 实用程序 transition duration-300 ease-in-out lg:group-hover:scale-105 时，它工作得很好。为什么这不起作用？首先，考虑检查：视口大于 lg 断点。您有 10 作为 scale 的值： module.exports = { theme: { extend: { scale: { '10': 'your value here', 此外，您需要确保存在具有 group 类的祖先元素，才能使 group-hover: 正常工作： tailwind.config = { theme: { extend: { scale: { 10: '0.1', }, }, }, }; <script src="https://cdn.tailwindcss.com/3.4.5"></script> <a href="foo" class="group"> <span class="group-hover:[&>img]:lg:scale-10 group [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <img src="https://picsum.photos/200" /> </span> </a> 或者，如果您打算在 <span> 元素本身上激活悬停，则需要修改变体以根本不使用 group： tailwind.config = { theme: { extend: { scale: { 10: '0.1', }, }, }, }; <script src="https://cdn.tailwindcss.com/3.4.5"></script> <a href="foo"> <span class="[&>img]:hover:lg:scale-10 [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <img src="https://picsum.photos/200" /> </span> </a>

tailwind-css css-transitions pseudo-element astrojs

回答 1 投票 0

在 CSS 中，在元素上使用“display:none”，但保留其“:after”

是否可以像display:none一样不显示元素，但继续显示:before和/或:after？我试过 #myspan {显示：无} #myspan:{显示:内联;之后内容：“*”}...

css pseudo-element

回答 7 投票 0

使用CSS ::之前和定位在文本后对齐星号

我有一个文本元素。我无法修改该文本。因此，我将尝试通过 CSS:: 修改该文本，然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后...

html css css-selectors position pseudo-element

回答 1 投票 0

为什么 CSS ::part 会覆盖 JavaScript element.style？

我有一个继承自 HTMLElement 的 HTML 自定义元素。该模板包含：示例 CSS：我的元素::部分（输入）{ 填充...

javascript html css pseudo-element custom-element

回答 2 投票 0

图像上的 CSS 箭头（不使用边框）

我正在尝试找出一种将箭头附加到标头图像底部的方法，如下所示。我见过很多关于如何使用 CSS3 创建箭头的方法，但我发现它们几乎总是......

css mask css-shapes pseudo-element

回答 1 投票 0

类型“HTMLElement”上不存在属性“pseudoStyle”

我正在尝试使用 Typescript 修改伪元素的高度。我在 IDE (vscode) 中收到以下错误这是我的代码。 // 选择元素让 el: HTMLElement = document.getElement...

javascript angular typescript ionic3 pseudo-element

回答 3 投票 0

为什么::before伪元素出现在元素之上？

根据我的理解，::before 应该出现在元素下方，而 ::after 应该出现在元素上方（就 z-index 而言）。在下面的示例中，我尝试仅制作背景

css z-index pseudo-element

回答 2 投票 0

如何在Tailwind伪类名上使用querySelector查找元素

鉴于我有单选按钮样式与顺风类我可以使用 JavaScript 查询选择找到该元素...

javascript css-selectors tailwind-css pseudo-element

回答 1 投票 0

如何将Javascript变量值写入CSS？

如何将时间变量的内容显示为 CSS 中的 content 属性？ JavaScript：函数时钟(){ var d = new Date(); var hour = d.getHours(); var min = d.getMinu...

javascript css pseudo-element

回答 6 投票 0

通过 JS 更新变量值后 CSS 伪类消失

我希望能够通过JS更新CSS变量，但是当我更新变量时，CSS伪元素被破坏（即消失）。这是 SCSS 代码：：根 { --测试-

javascript css frontend pseudo-element css-variables

回答 2 投票 0

当<p>悬停时使文本区域可见

我希望当我将鼠标悬停在上时出现，您想提供反馈吗？。换句话说，我想要和 <p>我们怎样才能...</desc> <question vote="0"> <p>我希望当我将鼠标悬停在 <pre><code><div id="Feedback"></code></pre> 上时出现 <pre><code><p>Would you like to give feedback?</p></code></pre>。换句话说，当我将鼠标悬停在该 p 元素上时，我希望 <pre><code><textarea></code></pre> 和 <pre><code><p>How can we imporve the page?</p></code></pre> 将其显示设置为“阻止”。</p> <p>这是我尝试过的：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Sign up</title> <link href="./account.css" rel="stylesheet"> </head> <body> <div id="entire-form"> <form action="form.html" method="GET"> <h1><b>Sign up =)</b></h1> <div id="Feedback"> <p>Would you like to give feedback?</p> <p>How can we imporve the page?</p> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> </div> </form> </div> </body> </html> </code></pre> <pre><code>textarea, #Feedback p{ display: none; } #Feedback p:nth-child(1) { /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/ display: block; margin: 15px; } #Feedback p:nth-child(1):hover{ display: block; } </code></pre> </question> <answer tick="false" vote="0"> <p>如果没有<pre><code>JavaScript</code></pre>，你就无法实现这一目标。我对您的代码进行了一些更改，涉及使用正确的 <pre><code>HTML</code></pre> 元素及其顺序来实现所需的功能。我还更新了您的<pre><code>CSS</code></pre>部分。</p> 当用户将鼠标悬停在其上或输入内容时，<p><pre><code>textarea</code></pre>将保持可见。</p> <p>我希望这能解决您的问题。您可以根据自己的意愿进行进一步的更改。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function () { const hoverLine = document.querySelector(".hover-line"); const textareaContainer = document.getElementById( "feedback-input-container" ); const textarea = document.getElementById("improve"); function showTextarea() { textareaContainer.style.display = "flex"; } function hideTextarea() { if (!textarea.value.trim()) { textareaContainer.style.display = "none"; } } hoverLine.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseout", hideTextarea); textarea.addEventListener("focus", showTextarea); textarea.addEventListener("input", showTextarea); textarea.addEventListener("blur", hideTextarea); });</code></pre> <pre><code>.hover-line { cursor: pointer; } #feedback-input-container { display: none; flex-direction: column; align-items: start; gap: 3px; margin-top: 5px; }</code></pre> <pre><code><h1>Sign up =)</h1> <form action="form.html" method="GET"> <label class="hover-line">Would you like to give feedback?</label> <div id="feedback-input-container"> <label>How can we improve the page?</label> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> <button type="submit" name="submit">Submit</button> </div> </form></code></pre> </div> </div> <p></p> </answer> </body></html>

html css css-selectors textarea pseudo-element

回答 0 投票 0

：之后与::之后

CSS 2.1 :after 和 CSS 3 ::after 伪选择器之间有任何功能差异吗（除了旧版浏览器不支持 ::after 之外）？对我们来说有什么实际原因吗...

css css-selectors pseudo-element pseudo-class

回答 2 投票 0

Chrome 和首字母伪元素的 CSS 问题

我遇到一个问题，Windows 上的 Google Chrome 与所有其他浏览器（例如 IE、Firefox、Safari）相比，段落的第一个字母的位置不同。差异在于垂直方向

css pseudo-element

回答 1 投票 0

@media 位于 ::before,::after 伪元素内

媒体查询可以在选择器内部使用，但它们似乎在纯 CSS 的伪元素内部被忽略。例子： div.container { 红色; ＆：：前 { 显示：内联...