标签: css-content

假设我有标记:

<div data-generated="world!">Hello </div>

..带CSS:

div:after {
    content: attr(data-generated);
}

这会产生文本:Hello world!- FIDDLE

div:after {
    content: attr(data-generated);
}

<div data-generated="world!">Hello </div>

但...

如果我尝试选择/复制文本 - 只能选择'hello'部分.

有没有办法选择css生成的文本？

注意:

1)我已查看有关生成内容的规范(此处和此处),我没有看到任何对此问题的引用.

这里和这里的规范似乎说生成的内容应该是可选择的

生成的内容应该是可搜索的,可选择的,并且可用于辅助技术

2)如果这个问题的答案是"不 - 这是不可能的" - 请链接到一个可靠的来源,说明这一点.

如此处所定义:

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

您可以使用以下代码来增加伪元素中的数字.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

有没有办法可以使用相同的代码来增加像"a","b","c"等字母？

谢谢!

我从上一个问题中得到了http://jsfiddle.net/8p2Wx/2/,我看到了这些问题:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

如果我带走content:"",它会破坏效果,我不明白为什么它是必要的.

为什么需要添加一个空content到:after和:before伪元素？

我已经使用了content属性很长一段时间了,今天我想尝试新的东西.而不是使用JS来显示图像工具提示,我想知道是否可以使用CSS动态地执行它.

所以我尝试过:

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

其中attr(id)应该返回的图片(字母数字)的ID这也是图象的名称.

它根本不起作用,它没有效果.我认为该块没有解析,因为向块添加边框或背景似乎也没有效果.

当我只使用attr(id)单独的,没有url的东西,它完美的工作.当我用attr(id)图片的真实名称替换它时,它也有效.

在网上搜索了一段时间后,我没有发现任何相关内容,所以我在这里.这是一个已知的错误还是我的错误？:)

很久以前有一个CSS3生成内容规范的草案,它允许任何HTML元素的content属性(不仅是::之前的:: ::伪元素之后),对空元素或替换元素没有任何正式限制.有人曾经被Opera的Presto支持(1,2),并且至少在一定程度上,通过WebKit的(3).到2011年底,WebKit的for 元素实现似乎有效地将它从空替换元素转换为非替换元素(甚至更改了上下文菜单,删除了"将图像另存为..."等选项).它还可以应用伪元素.contentimgspanimg::before

在当前的Blink(Chrome等)实现中,seeting content属性到img元素没有可见效果.但是img元素显然具有不同的结构,具体取决于它是正确加载还是被破坏:如果加载,它由DOM Inspector显示为一个简单的空元素,但如果被破坏,它会暴露内部的Shadow DOM结构,如下所示:

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

可能是因为在img阴影divs 的帮助下显示了破碎,在这种情况下可以将伪元素应用于它(4).

当前的WebKit不支持伪元素img.但是,有趣的是,至少iOS 9.2.1 Safari在为该content属性设置属性后开始支持它们img(5).

为什么这个属性会做出这样的改变？我想如果一个空元素获得任何内容(甚至生成),浏览器必须提供一些东西来显示这个内容,有效地用某种容器(如Blink的阴影div …

我有IE的问题(还有什么？):

我用CSS生成内容,它也有背景图像.我看起来像那样:

#nav ul li:after {
    content: "--";
    position: relative;
    z-index: 99;
    background: transparent url(image.png);
    color: transparent;
}

文本颜色在非IE浏览器中是透明的,但在所有IE浏览器(IE6-IE8)中它都是黑色的,你可以看到它.我怎么能让文字透明/不可见？

我已经尝试过了:可见性 - 不透明度 - 过滤器 - 文本缩进...但是没有一个人能够正确地完成他的工作,要么它消失了(带有我需要的背景),要么属性不适用.

鉴于以下场景,为什么:after选择器需要内容属性才能运行？

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

<div class="test"></div>

注意在指定content属性之前如何看不到伪元素:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

<div class="test"></div>

为什么这是预期的功能？你会认为显示块会强制元素出现.奇怪的是,您实际上可以在Web调试器中看到样式; 但是,它们不会显示在页面上.

正如标题所说,有没有办法设置iframes伪before/ after？没有用另一个包装iframe div,或者？`

我试着像任何其他元素一样设计样式,但没有成功:

iframe::before {
    content: 'foo';
    position: absolute;
    top: 0;
    left: 0;
}

iframe::after {
    content: 'bar';
    position: absolute;
    top: 0;
    right: 0;
}

http://fiddle.jshell.net/ppRqm/

更新

一个已知的解决方法是将前/后添加到源文件中的元素:http: //fiddle.jshell.net/ppRqm/2/

但有时您无法访问源文件.

是否可以将css counters()函数与前导零组合,生成如下列表:

Item 01
  Item 01.01
  Item 01.02
    Item 01.02.01

可以使用前导零,并且可以使用content: counter(name, decimal-leading-zero)组合嵌套计数器content: counters(name, ".").

我知道如果已知嵌套级别的解决方法(即我知道列表只会嵌套3级深度),但有人知道是否可以将这些组合用于未知嵌套级别的列表？

我正在尝试使用after伪元素为网站添加一些效果.

<div class="product-show style-show">
  <ul>
    <li>
      ....
      <div class="...">
        <div class="readMore less">...</div>
        <a href="3" class="readMoreLink" onclick="return false;">Read More</a>
      </div>
      ....
    </li>
  </ul>
</div>

和样式表:

.product-show .readMore.less {
   max-height: 200px;
   height: 100%;
   overflow: hidden;
}

.product-show .readMore.less:after {
   background: rgba(255, 255, 255, 0);
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30px;
 }

我看到.product-show .readMore.less的样式正在应用,但是当我从Chrome(最新版本)/ MacOS检查网站时,我在HTML块中没有看到::.我读过老浏览器有时会出现问题,但我认为如果我正确定义了样式,我应该能够至少看到:: after伪元素表示法.我究竟做错了什么？