第一个字母的边框轮廓

Question

如何勾勒第一个字母的底部边框？在下面的示例中，p:first-letter，我得到的只是红色下划线。连首字母大纲都打不分（大纲=块元素）！有没有其他方法可以为:first-letter 的底部边框编写轮廓？

我尝试了 CSS 组合技巧等，但没有成功。我确信当光标触摸一个单词并勾勒出该触摸单词的第一个字母下方的底部边框时，无论 Word 应用程序程序员在文档中显示什么，浏览器 DOM 都会显示某种伪属性和/或伪元素（这有吸引力的编程工件或功能未打印。链接的示例是 Wordpad.exe 中的字体 Impact，字体大小 36。小“t”下的轮廓边框。

预期输出：

p:first-letter {border-bottom: 1px solid red;font-size: 48px;}
p:first-letter*=["border-bottom"] {outline: green solid thin;}

<p><span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.</p>

CSS3 具有属性border-image。添加border-left: 0;等，或者border-image: url(border.png) 0 0 30 0 stretch;可以看到border-image只能显示在底部（不能inline，对于block元素）。

CSS Tricks - Gradient Borders【伪元素方块淘汰】

您可以在 W3 校舍免费玩耍，那里的边框图像支持一些 css3 属性。其他一切都失败了，大惊小怪的首字母下沉安排，但示例中存在跨度是有原因的：我们希望 image-border 属性的轮廓内联。这意味着使用元素和/或属性选择器调整 ["knock out"?] DOM 的 HTML 行为。有什么想法吗？

参考文献

• CSS Tricks - Outline

• W3Schools - Try It Border Image

• “CSS3 视觉快速入门指南”，Jason Cranford Teague，第 6 章文本属性，第 167 页。

Answer 1

要使 ouline 在首字母上 伪元素，您可以使用 box-shadows。
我注释了 CSS 代码，因此您可以看到 box-shadow 属性的每一行的作用：

p:first-letter {font-size: 48px;
  box-shadow: 
    0 3px 0 -1px #fff, /* to indent the green bottom line with the same color as the background */
    0 3px 0 0 green,  /* to create a bottom 3px high green line */
    inset 0 -1px 0 0 green; /* to create the top (1px) of the outline */
}

<p><span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.</p>
<p><span class="spec">Info.</span> Outline properties work best if !DOCTYPE is specified.</p>

Answer 2

以下是使用pseudo-element 为第一个字母生成轮廓（类似于您的PNG 图像）的选项。

这种方法的棘手之处在于pseudo-element 的宽度需要根据第一个字母的宽度来设置，否则轮廓将比第一个字母更宽/更窄。为了进行排序，我在p 标记中添加了data-first-letter 属性，并将其设置为pseudo-element 的content，并赋予它与p:first-letter 相同的font-size。您必须以某种方式为每个此类段落（手动或使用 JS）键入此属性的正确值。

p:first-letter {
  font-size: 48px;
}
p {
  position: relative;
}
p:after {
  position: absolute;
  top: 1em; /* setting in em to make positioning change in accordance with font-size */
  left: 0px; /* if you have a padding left on the paragraph then this should have an equivalent offset */
  content: attr(data-first-letter); /* to make the width of the outline same as first letter */
  font-size: 48px; /* same as first letter */
  width: auto;
  height: 1px;
  overflow: hidden; /* to make sure the content is not displayed */
  outline: 1px solid green; /* or border: 1px solid green; */
}

/* to demonstrate the changes when padding left is used */

.withpadding{
  padding-left: 20px;
}
.withpadding:after{
  left: 20px;
}

<p data-first-letter='N'>
  <span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.
</p>

<p data-first-letter='I'>
  <span class="spec">Info...</span> Outline properties work best if !DOCTYPE is specified.
</p>

<p data-first-letter='I' class="withpadding">
  <span class="spec">Info...</span> Outline properties work best if !DOCTYPE is specified.
</p>

---

最后，还有几点需要注意：

1. 提供的示例中的选择器p:first-letter*=["border-bottom"] 错误。 CSS 只有属性选择器，您无法验证元素是否具有底部边框（我认为这是您的意图）。
2. first-letter 伪元素不支持链接的 MDN 页面中指定的 outline 属性，因此无法使用。