How to form a symbol form two characters in css/html?

Question

I want two put two characters together and use it as a single symbol that will be scalable. I am searching for a general way of doing this.

For example, I want to combine the middle dot and O to get a dot inside the O. (I know there is a single character for this but this is an example).

MWE:

Desired result: &#664; <span style="font-size:200%">&#664;</span>

<div style="padding:20px">
  <span style="letter-spacing:-3px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-3px">&#183;O</span>
  <br>
  <span style="letter-spacing:-6px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-6px">&#183;O</span>
  <br>
  <span style="letter-spacing:-9px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-9px">&#183;O</span>
  <br>
  <span style="letter-spacing:-12px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-12px">&#183;O</span>
  <br>
  <span style="letter-spacing:-15px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-15px">&#183;O</span>
  <br>
  <span style="letter-spacing:-18px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-18px">&#183;O</span>
  <br>
  <span style="letter-spacing:-21px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-21px">&#183;O</span>
</div>

Possible duplicate of [How can I position one element below another?](https://stackoverflow.com/questions/40676648/how-can-i-position-one-element-below-another) — Rafael Herscovici, Sep 12 '18 at 13:29
If you're wanting this as a string of characters without a lot of hardcoding, this is going to be nearly impossible, but the first thing you should consider doing is using a fixed width font. But even if you do find a fixed width font, there's no guarantee it will have all the glyphs you would need. — Joseph Marikle, Sep 12 '18 at 13:31

score 4 · Answer 1 · edited Jul 18 '20 at 11:35

HTML:

<span class="the-char">O</span>

CSS:

.the-char{
  position: relative;
}

.the-char::after{
  content: ".";
  line-height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:50%;
  transform: translateY(-75%);
  text-align: center;
}

/* change the font size to see result */
.the-char,
.the-char::after{
  font-size: 24px;
}

You can change the font-size on the main char and the ::after it will scale proportionally.

Note: the dot "." char is not aligned at the center so you will have to make some adjustments with the top and translateY if you want to center it well inside the main char.

score 1 · Answer 2 · answered Sep 12 '18 at 13:51

If you are looking for something like this, it helps,

.dot1{
  font-size:2em;
}
.dot2{
  font-size:1.23em;
}
.dot1::before{
  content:'.';
  position:absolute;
  top:-1px;
  left:35px;
}
.dot2::before{
  content:'.';
  position:absolute;
  top:15px;
  left:13px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="DOT">
    <span class="dot2">O</span>
    <span class="dot1">O</span>
  </div>
</body>
</html>

score 0 · Answer 3 · edited Jul 18 '20 at 21:48

Make some divs like below with css below.

css will be

.dots {
    float: left;
    width: 12px;
    height: 17px;
    position: relative;
}
span.dot1 {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    top:-4px;
}
span.dot2 {
    position: absolute;
    width: 100%;
    height: 100%;
}

and html :

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <div class="dots">
            <span class="dot1">.</span>
            <span class="dot2">O</span>
    </div>
    </body>
    </html>

 .dots {
    float: left;
    width: 12px;
    height: 17px;
    position: relative;
}
span.dot1 {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    top: -4px;
}
span.dot2 {
    position: absolute;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="dots">
        <span class="dot1">.</span>
        <span class="dot2">O</span>
</div>
</body>
</html>

How to form a symbol form two characters in css/html?

3 Answers3