CSS伪元素允许在元素内增强内容显示或者为元素生成额外的开始或结束内容的能力。
我们最近从 v15 迁移到 Angular 17。对于 中的所有下拉菜单，都会自动创建，并且会看到所选选项的刻度线。有人可以建议如何删除这些伪代码吗
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>
在 CSS 中，在元素上使用“display:none”，但保留其“:after”
是否可以像display:none一样不显示元素，但继续显示:before和/或:after？ 我试过 #myspan {显示：无} #myspan:{显示:内联;之后内容：“*”}...
我有一个文本元素。我无法修改该文本。因此，我将尝试通过 CSS:: 修改该文本，然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后...
为什么 CSS ::part 会覆盖 JavaScript element.style？
我有一个继承自 HTMLElement 的 HTML 自定义元素。该模板包含： 示例 CSS： 我的元素::部分（输入）{ 填充...
我正在尝试找出一种将箭头附加到标头图像底部的方法，如下所示。我见过很多关于如何使用 CSS3 创建箭头的方法，但我发现它们几乎总是......
类型“HTMLElement”上不存在属性“pseudoStyle”
我正在尝试使用 Typescript 修改伪元素的高度。 我在 IDE (vscode) 中收到以下错误 这是我的代码。 // 选择元素 让 el: HTMLElement = document.getElement...
根据我的理解，::before 应该出现在元素下方，而 ::after 应该出现在元素上方（就 z-index 而言）。 在下面的示例中，我尝试仅制作背景
如何在Tailwind伪类名上使用querySelector查找元素
鉴于我有单选按钮样式与顺风类 我可以使用 JavaScript 查询选择找到该元素...
如何将时间变量的内容显示为 CSS 中的 content 属性？ JavaScript： 函数时钟(){ var d = new Date(); var hour = d.getHours(); var min = d.getMinu...
我希望能够通过JS更新CSS变量，但是当我更新变量时，CSS伪元素被破坏（即消失）。 这是 SCSS 代码： ：根 { --测试-
我希望当我将鼠标悬停在上时出现，您想提供反馈吗？。换句话说，我想要 和 <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>
CSS 2.1 :after 和 CSS 3 ::after 伪选择器之间有任何功能差异吗（除了旧版浏览器不支持 ::after 之外）？ 对我们来说有什么实际原因吗...
我遇到一个问题，Windows 上的 Google Chrome 与所有其他浏览器（例如 IE、Firefox、Safari）相比，段落的第一个字母的位置不同。差异在于垂直方向
@media 位于 ::before,::after 伪元素内
媒体查询可以在选择器内部使用，但它们似乎在纯 CSS 的伪元素内部被忽略。 例子： div.container { 红色; ＆：：前 { 显示：内联...
CSS 规范给出了以下原因： 注意：伪元素通常被排除在 :has() 之外，因为许多伪元素 他们的存在是有条件的，基于他们祖先的风格， 所以允许这些...
如何使用 useRef 在 React TypeScript 中选择伪元素
我正在尝试在React打字稿中选择伪元素。 定义参考 const 标头 = useRef(null) 设置参考 但我确实... 我正在尝试在 React typescript 中选择伪元素。 定义参考 const header = useRef<HTMLDivElement>(null) 设置参考 <div className={classNames(style.header)} ref={header}> 但我不知道如何选择 header.current 的伪元素？ 请帮我。 谢谢 在 React with TypeScript 中，直接通过 JavaScript 选择伪元素（如 ::before 或 ::after）是不可能的，因为伪元素不是 DOM 树的一部分。但是，您可以使用 CSS 操作伪元素。 你可以使用CSS变量，这是个好方法， .header::before { content: ''; background-color: var(--pseudo-bg-color, blue); /* other styles */ } 另一种解决方案正在反应中： import React, { useRef, useEffect } from 'react'; import classNames from 'classnames'; import style from './Style.module.css'; const YourComponent: React.FC = () => { const header = useRef<HTMLDivElement>(null); useEffect(() => { if (header.current) { header.current.style.setProperty('--pseudo-bg-color', 'red'); } }, []); return ( <div className={classNames(style.header)} ref={header}> Your content here </div> ); }; export default YourComponent; These approach allows you to dynamically control the styles of pseudo-elements in react. Just check..
我有一个段落，其中包含一些文本、可能的跨度和一些：之前和之后：伪内容： 没有跨度的正常内容 具有 跨度的附加内容... 我有一个段落，其中包含一些文本、可能的跨度和一些 :before 和 :after 伪内容： <p>Normal content without a span</p> <p>Additional content with a <span>span</span></p> 我想在段落的开头和结尾调整伪内容： « Normal content without a span » « Additional content with a [span] » 我虽然一个带有 grid-template-columns 的简单网格就可以做到这一点，但我尝试的所有内容都会与附加的 span 元素混淆。 怎样才能达到这样的效果呢？我应该使用 flex 来代替吗？ 这是一个示例片段： p { display: grid; width: 40em; grid-template-columns: 2rem ? ? 2rem; span { border: thin solid #ccc; padding: 0 0.25rem; } &:before { content: "«"; } &:after { content: "»"; } } <p>Normal content without a span</p> <p>Additional content with a <span>span</span></p> 您不需要 grid 为此，使用 position: absolute 将箭头粘贴到 <p> 的两侧即可解决您的问题。 此外，grid-template-columns: 2rem ? ? 2rem;是无效的CSS属性，?是无效值。 p { position: relative; width: 40em; padding-left: 30px; span { border: thin solid #ccc; padding: 0 0.25rem; } &:before { content: "«"; position: absolute; left: 0; } &:after { content: "»"; position: absolute; right: 0; } } <p>Normal content without a span</p> <p>Additional content with a <span>span</span></p>
::before 伪元素未显示在表单下方，尽管 z-index -1 设置
我遇到一个问题，使用 ::before 创建的元素没有出现在表单下方。即使将 z-index 设置为 -1 后，它也不起作用。我该如何解决这个问题？ .form::之前{ 内容：“”...
我正在使用 :before 伪元素绑定到特定类来在 p 标签前面添加符号，CSS 如下所示： td > p.markerclass1:之前{ 位置：绝对； 左：-1rem； c...