CSS"内容"无效

Question

我想通过CSS而不是HTML中添加段落的文本,因为它是随着网站的响应性而变化的主题.

现在我无法让它工作,我想知道CSS是否有问题？

此外,这是唯一的方法(使用纯HTML和CSS)还是有另一种方法来定位文本并使用每个分辨率更改它？

HTML:

<p class="title"></p>

CSS:

p.title {
        width: auto;
        height: auto;
        position: relative;
        float: left;
        clear: none;
        margin: 40px 0 0 0;
        padding: 0;
        display: block;
        font-family: 'Fjalla One', sans-serif; 
        font-weight: 400; 
        font-size: 36px;
        color: #d76e50; color: rgba(215, 92, 52, 0.9);
        cursor: default;
        content:"TITLE GOES HERE";
}

Answer 1

CSS content属性只能与::before和::after伪元素一起使用.您可以通过创建仅包含样式的子元素来解决此问题::after,并且还包括content依赖于通过媒体查询的解析的文本的属性.

Answer 2

即使您希望内容作为响应式设计的一部分进行更改,CSS也不是放置内容的地方.

HTML/CSS/JS的重点在于内容,样式和脚本之间的分离.无论您的意图是什么,将内容放入CSS或样式化为HTML都会破坏它们.

但是直接回答你的问题:CSS content仅在极少数情况下有效.它不适用于一般选择器(正是因为我上面提到的要点).

content仅适用于导致将伪元素添加到页面的选择器.在实践中,这意味着你真的只能使用content与::before和::after选择.

即使在这些你可以使用它的情况下,你仍然不应该按照你所描述的方式使用它.使用::before和::after,它不是用于将实际内容放入CSS中; 它实际上只是用于在某些东西旁边插入标记等任务,例如您在维基百科等网站中的外部链接旁边的小符号.这种东西仍然是造型,因此在CSS中是正确的,即使它确实添加了"内容".

注意:使用插入的内容::before和::after行为可能不同,以在您的网站的其他内容.例如,您将无法通过Javascript访问伪元素,并且您的用户可能无法选择文本.

实现您尝试做的更典型的方法是在页面上包含两个(或更多)元素,其中包含各种不同的内容字符串,并让您的响应式CSS代码触发其中一个可见,其他的根据页面大小隐藏.