如何定位 html 元素内的文本？

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.

中将 html 元素包裹起来，例如 span

是否有 css select 或 select 元素内部的文本，而不影响元素本身？或者在它周围包裹一个 html 元素，例如 span，例如

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

感谢每一个提示！ If someone likes jsfiddle here is one to play with.

Answer 1

你为什么不把 padding 添加到最后一个 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.

的情况下针对目标间距（margin/padding）的解决方案

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;
}

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;
}

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

现在，要将它们设置为 'breadcrumbs,'，您可以使用生成的内容来提供分隔符，例如，您可以更新 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: '[=13=]BB';
  /* 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;

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: '[=14=]BB';
  position: absolute;
  right: 100%;
  width: 1em;
  text-align: center;
}
li:first-child::before {
  content: '';
  width: 0;
}

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

如何定位 html 元素内的文本？

How to target text inside an html element?

css

css-selectors