pseudo-element 相关问题

数据属性中是否可以换行？我正在尝试做这样的事情： 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：我的元素::部分（输入）{ 填充...