How to Create paragraph first letter uppercase in html & css (in special format)


Tags: html,css,pseudo-element

Problem :

please help me to create this format of paragraph in html & css

enter image description here

.home-p-main {
  font-family: Times New Roman;
  font-size: 10pt;
  text-align: left;
  position: relative;
  margin-left: 10pt;
  margin-right: 10pt;
  position: absolute;
  margin-top: 1pt;
  color: black;
  background-color: aliceblue;
  text-indent: 10pt;
}
.home-p-main::first-letter {
  text-transform: capitalize;
  color: red;
  font-size: 300%;
  font-weight: bold;
  padding-left: 25px;
  position: relative;
  margin-left: -26px;
}
<p class="home-p-main">The Linux open source operating system, or Linux OS</p>

Just with html and css



Solution :

I am guessing that the problem is that the first letter stays on the first line, and the second line underneath it. And you would like the second (and so on) to be on the right of the first letter.

You could do so, by displaying that first letter as a block, and float it to the left.

The CSS then looks like this (removed unnecessary lines)

.home-p-main{
    font-family: Times New Roman;
    font-size: 10pt;
    margin-left: 10pt;
    margin-right: 10pt;
    margin-top: 1pt;
    background-color: aliceblue;
}
.home-p-main:first-letter{
    text-transform:capitalize;
    color: red;
    font-size: 500%;
    font-weight: bold;
    display: block;
    float: left;
    margin-right: 5pt;
}

DEMO


    CSS Howto..

    How to reference css in actionlink?

    css: how to build centered div with minimum spacing on the left

    How can I keep the progress bar number value centered and on top?

    how to write IE 8 specific css styles

    How to set jQuery draggable min/max-left and min/max-right

    jQuery select- How to change the css style select?

    c3.js - how to show hand cursor on bar chart hover

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to Resize Unicode Characters via CSS

    How to change parent's CSS only when child is hovered?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    how to make a left aligned navigation with dropdown elements

    CSS: how to set the width of form control so they all have the same width?

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to center absolutely positioned elements in css for a pdf

    How to reanimate div with jquery after using css keyframe animation

    How to fit two divs side by side horizontally?

    dynamic drop down how to show success using css (tic icon)

    Show submit button as an image

    Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

    How to edit css for jquery datepicker prev/next buttons?

    HTML Tables - how can I make all cells other than the last always be wide enough?

    Showing hidden divs element using jQuery show() not working in IE7

    How do I have fieldset::before rule account for the legend?

    How to make a box expand a distance from the sides

    How to make application browser compatible

    css make img shown when hover a li

    How to do drop-down box like “More action” in gmail

    How to align multiple input using css