How to vertically align a "colon" : with text

HTML & CSS
12

This working page compares

(1) @ChrisjChrisj + @Ray.H with span around text enclosing another span around the colon.

(2) @Ray.H + @ronpat with span around colon only as suggested by @SamA74.

The only change is the line with the colon.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>vert-align colon 4</title>
<!--
https://www.sitepoint.com/community/t/how-to-vertically-align-a-colon-with-text/294657/5
ChrisjChrisj
Example code by Ray.H + ronpat
-->
    <style>
body {
    background:#333;
}
p.text-1,p.text-3 {
    color:#eee;
    line-height:1;
    font-size:19px;
    font-weight:100;
    font-family:Arial;
    margin:0;
}
p.text-2 {
/*    line-height:1;  /* TEST line-height. pick one and enable it. */
/*    line-height:1.1;  /* TEST line-height */
/*    line-height:normal;  /* TEST line-height; normal is the default */
    font-size:55px;
    font-weight:800;
    font-family:Arial;
    margin:0;
/*    outline:1px dashed lime;  /* TEST Outline */
}
p.text-2 span {
    color:red;
    vertical-align:.04em;
    font-weight:bold;
/*    outline:1px dashed yellow;  /* TEST Outline */
}

.text-4 {
    color:red;
/*    line-height:1;  /* TEST line-height; pick one and enable it. */
/*    line-height:1.1;  /* TEST line-height */
/*    line-height:normal;  /* TEST line-height; normal is the default */
    font-size:3.4375em;  /* em instead of px */
    font-weight:800;
    font-family:Arial;
    margin:0;
/*    outline:1px dashed lime;  /* TEST Outline */
}
.text-4 span {
    line-height:1;
    vertical-align:0.064em;
/*    outline:1px dashed yellow;  /* TEST Outline */
}

    </style>
</head>
<body>

<div class="">
    <div class="">
        <p class="text-1">text One Textj Textj</p>
        <p class="text-2"><span>text Tjxtj <span>:</span> textj Textj</span></p>
        <p class="text-3">text Three Textj Textj</p>
    </div>
</div>
<hr> <!-- TEMP divider for test purposes -->
<div class="">
    <div class="">
        <p class="text-1">text One Textj Textj</p>
        <p class="text-4">text Tjxtj <span>:</span> textj Textj</p>
        <p class="text-3">text Three Textj Textj</p>
    </div>
</div>

</body>
</html>

Have you ever taken an introductory HTML/CSS class?

When posting a question, please adhere to our repeated requests for a working page that demonstrates the problem along with your verbal problem description.
Why do you think that request does not apply to you???

Forum guidelines:
https://www.sitepoint.com/community/faq#civil

Forum POSTING BASICS:
Forum Posting Basics