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代码触发其中一个元素可见以及根据页面大小隐藏的其他内容。

Answer 3

根据Mozilla开发人员网络pseudo-elements，CSS内容属性只能应用Documents，因此您可以将这行代码添加到您的css文件中：

p.title::after {content: 'TITLE GOES HERE';}

Answer 4

content属性不适用于常规CSS声明；您需要使用伪声明:before（但是:after也可以使用）。

section-title:before {                                                                                                                  
  content: "Section Title";                                                                                                                    
}                                                                                                                                  

section-title {                                                                      
  font-weight:100;                                                                                                                     
  opacity:0.7;                                                                                                                   
  vertical-align:middle;                                                                                                           
  border-bottom:3px solid #DDDDDD;                                                                                  
}

此示例可以轻松地适应您的问题。我喜欢这个比其他示例更具体的示例，因为您最终的HTML将会很简单：

<section-title />

CSS“内容”无效

4 个答案: