当前位置: 首页 > 面试题库 >

向:: after或:: before伪元素内容添加换行符

楚瑞
2023-03-14
问题内容

我无权访问页面的HTML或PHP,只能通过CSS进行编辑。我一直在网站上进行修改,并通过::after::before元素添加文本,并且发现转义Unicode应该用于添加内容之前或之后的空格等内容。

如何在content属性中添加多行?

在示例中,HTML换行符 仅用于可视化 我想要实现的目标:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

问题答案:

content属性指出:

作者可以通过在“ content”属性之后的字符串之一中写入“ \ A”转义序列来在生成的内容中包含换行符。插入的换行符
仍受“空白”属性的约束。 有关“ \ A”转义序列的更多信息,请参见“字符串”和“字符和大小写”。

因此,您可以使用:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

但是,在转义任意字符串时,建议使用\00000a而不是\A,因为任何数字或[a-f]字符后跟新行可能会产生不可预测的结果:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}


 类似资料:
  • 此问题是线程下的扩展。有没有一种方法可以将SVG用作伪元素:before或:after中的内容。 我试图使用伪类在div之后附加一个svg三角形。 上面的代码在chrome中运行良好,但在IE中它没有加载svg内容。 我也尝试了背景图像属性,但它似乎在IE(版本 将此svg附加为带有伪类的内容的正确方法是什么?

  • 问题内容: 我正在尝试为HTML5中的提出一些好的默认样式,并尝试了以下方法: las,内容从不显示。对于伪元素,双冒号和单冒号都不是问题。我都尝试过。拥有一个伪元素和一个伪类也不是问题。我已经尝试过不使用和了。在Chrome,Safari和Firefox中,我得到了相同的行为(Firefox没有和类,但是我尝试了不使用它们。) 在伪元素工作细,,,和元素-其中一些是块元件和一些是内联。 因此,我

  • 问题内容: 无论如何要使伪旋转 我正在尝试旋转unicode符号。 问题答案: 内联元素无法转换,伪元素默认情况下是内联的,因此您必须应用或转换它们:

  • 本文向大家介绍jQuery使用before()和after()在元素前后添加内容的方法,包括了jQuery使用before()和after()在元素前后添加内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法。分享给大家供大家参考。具体如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 问题内容: 在此MS兼容性表上,它说IE9不支持伪元素和,但是当我尝试时,它似乎支持伪元素… 难道我做错了什么?我认为并且将是隐藏IE9中内容的好工具,而实际上却不是。 问题答案: IE8和更高版本支持CSS2伪元素和(具有传统的单冒号表示法)。它们不是CSS3的新功能。 另一方面,双冒号表示法是CSS3的新功能。IE9 确实 支持and和CSS1伪元素and的新符号。然而,展望未来,没有新的伪元

  • 问题内容: 我正在使用和CSS伪元素,并且它在 IE8 和所有现代浏览器中都可以正常工作,但在 IE7中 却不能正常工作。在 IE7中 是否存在已知的解决方法? 问题答案: 我在项目中使用的是IE8.js(http://code.google.com/p/ie7-js/),我必须将其删除,因为它在10/15秒内阻止了IE7。 为了保留用:after和:before伪元素生成的内容,而没有IE8.j