JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="type1">
    <a href="">T</a>
    <a href="">K</a>
    <a href="">G</a>
    <a href="">の</a>
    <a href="">声</a>
</div>

<hr>
    
<div class="type2">
    <a href="">T</a>
    <a href="">K</a>
    <a href="">G</a>
    <a href="">の</a>
    <a href="">心</a>
</div>

<hr>

<div class="type3">
    <span>T</span>
    <span>K</span>
    <span>G</span>
    <span>の</span>
    <span>音</span>
</div>

CSS

div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  width: 250px;
  height: 60px;
}

a {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  -webkit-flex-basis: auto;
  flex-basis: auto;
  -webkit-align-self: stretch;
  align-self: stretch;
  margin: 0;
  border: 1px solid #003366;
}

span {
  margin: 0;
  border: 1px solid #663300;
}

/* 親にposition付けたパタン
----------------------------------- */
.type1{
    position: relative;
}
.type1::after{
    content: "聞こう！";
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background-color: gold;
}

/* 子にposition付けたパタン
----------------------------------- */
.type2 a{
    position: relative;
}
.type2 a::after{
    content: "知ろう！";
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background-color: gold;
}

/* flex > inline-elementで幅のみ指定
----------------------------------- */
.type3 span{
    width: 50px;
}