Geek Answers Handbook

Pseudo-class: the first letter does not include the display: block or position absolute

I have a problem, I want to put the first letter in the first raw separately from the text. CSS doesn't seem to be recognizable display: block; or position: absolute for the pseudo-class of the first letter.

Note: I cannot add another tag to the first letter.

EXAMPLE

HTML

<div class="some-word">
  Product
</div>

CSS

.some-word:first-letter{
  font-size:30px;
  display:block; /**doesnt work**/
  position:absolute;/**doesnt work**/
}

What I'm trying to achieve:

enter image description here

+4
source share
2 answers

Found two solutions

First solution To add word-break to the shell element : all; + add margin-right to the first letter: 100%; + add some width to the word container;

VIEW EXAMPLE

.some-word{
  overflow:hidden;
  width:70px;
  word-break: break-all; 
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
}

float: left; + margin-right: 100%; + ;

.some-word{
  overflow:hidden;
  width:70px;  
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
  float:left;
}

, Alex Char, .

+1

:

CSS CSS, , :: first-letter:

  • : , , --, -, --, -, , -, --, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height .

  • : , , -, , , , , -blend-mode.

  • : margin, margin-top, margin-right, margin-bottom, margin-left.

  • : , padding-top, padding-right, padding-bottom, padding-left.

  • : , , , , , , .

  • , -, , , ( ), , --, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align ( float ) CSS-.

, , , CSS.

, html, span . :

.some-word span {
  font-size: 50px;
  position: relative;
  padding-right: 10px;
}
<div class="some-word">
  <span>P</span>roduct
</div>
+4

More articles:


All Articles