20

我想通过 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";
}
4

4 回答 4

58

CSScontent属性只能::before与::after伪元素一起使用。您可以通过创建一个子元素来解决此问题，该子元素仅具有::after例如样式，并且还包括content依赖于通过媒体查询解析的文本属性。

于 2013-11-04T15:43:00.440 回答
13

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

HTML/CSS/JS 的全部意义在于将内容、样式和脚本分开。将内容放入 CSS 或将样式放入 HTML 会破坏这一点，无论您的意图是什么。

但要直接回答您的问题：CSScontent仅在极少数情况下有效。它在一般选择器上不可用（正是因为我上面提到的几点）。

content仅适用于导致将伪元素添加到页面的选择器。实际上，这意味着您只能真正使用contentwith::before和::after选择器。

即使在您可以使用它的这些情况下，您仍然不应该以您描述的方式使用它。使用::beforeand::after时，它不适合将实际内容放入您的 CSS；它实际上仅用于在某物旁边插入标记之类的任务，例如您在维基百科等网站的外部链接旁边获得的小符号。这种东西仍然是样式，因此在 CSS 中是正确的，即使它确实添加了“内容”。

请注意，使用::before和插入的内容::after可能与您网站中的其他内容不同。例如，您将无法通过 Javascript 访问伪元素，并且您的用户可能无法选择文本。

实现您想要做的更典型的方法是在页面上有两个（或更多）元素，其中包含各种不同的内容字符串，并让您的响应式 CSS 代码触发其中一个可见而其他根据页面大小隐藏。

于 2013-11-04T15:45:53.200 回答
3

根据 Mozilla Developer Networks Documents ， CSS content 属性只能应用于伪元素，因此您可以将以下代码行添加到您的 css 文件中：

p.title::after {content: 'TITLE GOES HERE';}
于 2013-11-04T15:49:44.487 回答
1

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 />
于 2020-07-03T00:42:51.170 回答