Home Website make defualt first letter in first word of evry sequence in evry element

Questions

Website make defualt first letter in first word of evry sequence in evry element

February 28, 2022

Want to make capitals letters by default generated by website . I have a problem my code make first letter capital in other else but in attachemnt and span it doesn’t work . i make it in * becouse in attachment body doesnt work. I want do it only for first word in every seqience Here is my co

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
/* 
*/
body {
    background: rgb(43, 42, 42);
    color: aliceblue;
    font-family: "Noto Sans JP", sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*::first-letter {
    text-transform: capitalize;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- style  -->
        <link rel="stylesheet" href="style.css" />
        <!-- shortcut icon / title-->
        <title>AAAA</title>
        <link rel="icon" sizes="any" href="images/skyview.jpg" />
    </head>
    <body>
        <div>
            <h1>first letter big</h1>
            <h1>first letter big</h1>
            <a href="#">no big first letter</a>
        </div>
        <span>no big first letter</span>
    </body>
</html>

>Solution :

css selector ::first-letterdoesn’t work on inline element as span

one way to solve your issue is to apply display:block or display:inline-block on wanted element

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
/* 
*/
body {
    background: rgb(43, 42, 42);
    color: aliceblue;
    font-family: "Noto Sans JP", sans-serif;
}

span, a {
  display:block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::first-letter {
border: solid red 1px;
    text-transform: capitalize;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- style  -->
        <link rel="stylesheet" href="style.css" />
        <!-- shortcut icon / title-->
        <title>AAAA</title>
        <link rel="icon" sizes="any" href="images/skyview.jpg" />
    </head>
    <body>
        <div>
            <h1>first letter big</h1>
            <h1>first letter big</h1>
            <a href="#">no big first letter</a>
        </div>
        <span>no big first letter</span>
    </body>
</html>