Border outline on first letter

Question

How to outline the bottom border of a first letter? In the example below, p:first-letter, all I get is the red underline. Can't even score the first-letter outline (Outline = Block Elements)! Is there some other way to code an outline for the bottom border of a :first-letter?

I tried CSS combinatory tricks, etc. without success. I feel certain that a pseudo attribute and/or pseudo element of some sort would display for browser DOM whatever the Word application programmers are displaying in documents when a cursor touches a word and outlines the bottom border under the first letter of that touched word (this attractive programming artifact or feature does not print. The linked sample is font Impact, font-size 36 in Wordpad.exe. Outlined border under the small "t".

Expected Output:

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 has the property border-image. Add border-left: 0; etc., or border-image: url(border.png) 0 0 30 0 stretch; and you can see that border-image can display only on the bottom (not inline, for block elements).

CSS Tricks - Gradient Borders [pseudo element block knockout]

You can play around for free at the W3 schoolhouse, where some css3 properties are supported for border image. Failing all else, fuss up a drop-cap arrangement, but the span is there in the example for a reason: we want image-border property's outline inline. This means adapting ["knock out"?] DOM's HTML behavior with element and/or attribute selectors. Any ideas?

References

• CSS Tricks - Outline

• W3Schools - Try It Border Image

• "CSS3 Visual Quickstart Guide", Jason Cranford Teague, chapter 6 Text Properties, page 167.

Answer 1

To make the ouline on the first-letter pseudo element, you can use box-shadows.
I commented the CSS code so you can see what each line of the box-shadow property does:

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

The below is an option using a pseudo-element to generate an outline (similar to your PNG image) for the first letter.

The tricky part with this method is that the pseudo-element's width need to be set according to the width of the first letter and if not the outline would be wider/narrower than the first letter. In order to get this sorted, I have added a data-first-letter attribute to the p tag and have set this as the content of the pseudo-element and have given it the same font-size as the p:first-letter. You have to somehow key in the correct value for this attribute for every such paragraph (either manually or using 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>

---

Finally, some additional points to note:

1. The selector p:first-letter*=["border-bottom"] in the sample provided in question is wrong. CSS has only attribute selectors and you cannot verify whether the element has bottom border or not like that (which I assume was your intention).
2. first-letter pseudo-element does not support outline property as specified in the linked MDN page and hence it cannot be put to use.