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

user_1296891 0
Viewed 1134

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).

enter image description here

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>

diacritics symbols css html
3 Answers

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.

user_49115010

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>

user_103309440

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>

user_95576070
Related