首字母边框轮廓

Question

如何为首字母轮廓添加底部边框？在下面的示例中，p:first-letter，我只得到了红色的下划线。甚至无法得到首字母轮廓（轮廓=块元素）！是否有其他方法来为:first-letter添加底部边框的轮廓？

我尝试过CSS组合技巧等，但没有成功。我确信某种伪属性和/或伪元素会显示浏览器DOM，无论Word应用程序程序员在文档中触摸单词并在该触摸单词的第一个字母下面轮廓底部边框时显示什么（这个有吸引力的编程工件或特征不打印。链接的示例是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只能在底部显示（对于块元素而言，不是内联的）。 CSS Tricks - Gradient Borders [伪元素块级击穿]

你可以在W3 schoolhouse免费试玩一些支持border image的CSS3属性。如果所有其他方法都失败了，请使用一个drop-cap布局，但是示例中的span标签是有原因的：我们希望image-border属性的轮廓线内联。这意味着需要使用元素和/或属性选择器来适应DOM的HTML行为。有什么想法吗？ 参考文献

• CSS Tricks - 轮廓线

• W3Schools - 尝试边框图片

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

- mark stewart

---

什么是轮廓边框？您的图像只显示了“t”下面的一条线，可以根据所需的距离使用下划线、边框或轮廓来设置它。 - Jukka K. Korpela

@JukkaK.Korpela：我的猜测是OP可能想要通过边框本身来实现双线效果（当然，在中间仍然可以留出空心区域）。但是，最好让OP自己澄清一下。 - Harry

Answer 1

要使首字母伪元素上的轮廓，可以使用盒子阴影。
我已经注释了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>

- web-tiki

---

这是更好的答案 :) - Harry

Answer 2

以下是一种使用伪元素生成首字母轮廓（类似于PNG图片）的选项。

这种方法的棘手之处在于，伪元素的宽度需要根据第一个字母的宽度设置，如果不是那样，轮廓将比第一个字母更宽/窄。为了解决这个问题，我向p标签添加了一个data-first-letter属性，并将其设置为伪元素的内容，并且给它相同的字体大小作为p:first-letter。您必须以某种方式为每个这样的段落键入正确的属性值（可以手动或使用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 属性，因此无法使用它。

- Harry