Question

我有一个插件生成的以下情况，我无法重写，因为我需要解决这个问题。它为网站生成面包屑，如下例所示：

<li><a>Parent</a></li>
<li><a>Subparent</a></li>
<li><a>Subsubparent</a></li>
<li>Current Site</li>

我已经将链接设置为更易于点击

li {height: 40px;}
li a {padding: 5px; display: inline-block; height: 30px;}

现在当然最后一个元素没有得到相同的填充并且看起来有线。我无法在php中包装像span这样的html元素。

是否有一个css选择器来选择元素内部的文本，而不会影响元素本身？或者在它周围包装一个像span这样的html元素，比如

li:last-child::before {content:"<span>"}

每个提示都赞赏！ If someone likes jsfiddle here is one to play with

Answer 1

为什么不直接将填充添加到最后li和锚点？

Updated JsFiddle

li a, li:last-child {padding: 10px; display: inline-block;}

Answer 2

我创建了以下解决方案以获得正确的样式。

li:last-child::before {
    content: "";
    opacity: 0;
    display: inline-block;
    margin: 10px 0 10px 10px;
}

li:last-child::after {
    content: ".";
    opacity: 0;
    display: inline-block;
    margin: 10px 10px 10px 0;
}

可悲的是，其中一个伪元素需要content:"."或其他真实内容。这是目标间距（边距/填充）的解决方案，无需更改某些css / html。

Updated jsfiddle

我仍然希望看到干净的CSS解决方案！

Answer 3

我最自己的建议是：

li {
  height: 40px;
  /* vertically-aligns the text to
       the same 'line': */
  line-height: 40px;
  /* to display in a row, given the
       text-alignment I assume this is required,
       remove/adjust if not: */
  float: left;
  /* removes the bullets: */
  list-style-type: none;
  /* Just to clearly show the size of
       the <li> elements: */
  background-color: #ffa;
}
li:nth-child(odd) {
  /* again, just to show the size: */
  background-color: #f90;
}
li a {
  /* to fill the whole of the <li>: */
  display: block;
}
li a:hover {
  /* just to show the hover 'hit-area': */
  background-color: #f00;
  transition: background-color 0.4s linear;
}

＆＃13;

li {
  height: 40px;
  line-height: 40px;
  float: left;
  list-style-type: none;
  background-color: #ffa;
}
li:nth-child(odd) {
  background-color: #f90;
}
li a {
  display: block;
}
li a:hover {
  background-color: #f00;
  transition: background-color 0.4s linear;
}

＆＃13;

<ul>
  <li><a href="#">Parent</a>
  </li>
  <li><a href="#">Subparent</a>
  </li>
  <li><a href="#">Subsubparent</a>
  </li>
  <li>Current Site</li>
</ul>

＆＃13;

现在，将它们设计为＆＃39;面包屑，＆＃39;您可以使用生成的内容来提供例如，分隔符可以更新CSS：

li {
  /* other rules remain the same,
     this is added to provide space
     for the generated content: */
  margin-left: 1em;
}
  /* there is (usually) no marker before
     the first breadcrumb, this removes its
     space: */
li:first-child {
  margin-left: 0;
}
/* other rules that, remain the
   same, are excised for brevity */
li::before {
  /* unicode for the guillemot,
     '»', character: */
  content: '\00BB';
  /* to position easily and prevent
     altering the position of the child
     <a> elements: */
  position: absolute;
  /* simple means to move the generated
     content off the left edge: */
  right: 100%;
  width: 1em;
  text-align: center;
}
/* no marker the first breadcrumb: */
li:first-child::before {
  /* removing both content and width: */
  content: '';
  width: 0;

＆＃13;

li {
  height: 40px;
  line-height: 40px;
  position: relative;
  margin-left: 1em;
  float: left;
  list-style-type: none;
}
li:first-child {
  margin-left: 0;
}
li a {
  display: block;
}
li a:hover {
  background-color: #f00;
  transition: background-color 0.4s linear;
}
li::before {
  content: '\00BB';
  position: absolute;
  right: 100%;
  width: 1em;
  text-align: center;
}
li:first-child::before {
  content: '';
  width: 0;
}

＆＃13;

<ul>
  <li><a href="#">Parent</a>
  </li>
  <li><a href="#">Subparent</a>
  </li>
  <li><a href="#">Subsubparent</a>
  </li>
  <li>Current Site</li>
</ul>

＆＃13;

如何在html元素中定位文本？

3 个答案: