Nesting pseudo-elements inside pseudo-elements

不羁的心 提交于 2019-11-26 12:29:21

问题


I have a :before for an opening \'quote\' and an :after for a closing quote.

Now what I want is an :after:after for the \'cite\' reference but I cant get it to work.

Does anyone know if this is possible?

My code so far:-

blockquote:before { content: \'\\201C\'; }
blockquote:after { content: \'\\201D\'; }

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent:60px;
}
blockquote:before {
  font-size: 170px;
  margin-left: -136px;
  margin-top: 50px;
  opacity: 0.2;
  position: absolute;
  overflow:visible;
  float:left;
  width:135px;
}
blockquote:after {
  float: right;
  font-size: 170px;
  margin-right: 35px;
  margin-top: 33px;
  opacity: 0.2;
  overflow:visible;
  width:135px;
}
blockquote[cite]:after:after {
    display: block;
    text-align: right;
    content: \"\\2014\\ \" attr(cite);
    font-style: normal;
    font-size: 0.8em;
    }

回答1:


The idea of nesting ::before and ::after pseudo-elements has been proposed; see this section of the Generated and Replaced Content module. However, that module has been abandoned pending a complete rewrite, so I wouldn't hold my breath on this document ever receiving implementation until it's republished. And even then, whether nesting content pseudo-elements will still be a thing is as yet unknown.



来源:https://stackoverflow.com/questions/9007546/nesting-pseudo-elements-inside-pseudo-elements

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!