::first-letter selector does not work even when parent element is of type block-CodePudding

I'm trying to create something like this image with CSS using ::before and ::first-letter pseudo-elements

For the record, I also tried to do the same without using ::before by adding additional markup inside the link, and it still didn't work.

.doi::before {
  display: inline-flex;
  content: 'doi';
  background-color: orange;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: #fafafa;
}

.doi::before::first-letter {
  display: inline-block;
  color: #333 !important;
}

.doi {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

<a  href="https://doi.org/10.1016/some.journal.doi">10.1016/some.journal.doi</a>

CodePudding user response：

As per the comment and this link, the first-letter is a bit limited as to what display: types it can be used in. If you add a div you can style it as follows:

.doi {
  display: inline-block;
  line-height: 32px;
}

.doi-logo {
  display: inline-block;
  color: white;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  width: 32px;
  background-color: orange;
  border-radius: 1000vw;
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 1rem;
  color: #fafafa;
}

.doi-logo::before {
  content: 'doi';
}

.doi-logo::first-letter {
  color: black;
}

<a class='doi' href="https://doi.org/10.1016/some.journal.doi">
  <div class='doi-logo'></div>10.1016/some.journal.doi</a>