html - 如何使用 CSS 和 HTML 在圆圈上添加文本？

Question

以上是我的计时器目前的样子。
我想将“停止”这个词添加到我的计时器中，但我不知道如何。
请记住，它实际上是一个输入文本，文本是时间本身。我想在时间上添加停止这个词。
HTML代码:

<input type="text" name="" value="Start" id="">

CSS代码:

  input[type=text]:focus {
  height: 150px;
  width: 150px;
  background-color:  white;
  caret-color: transparent;
  border-radius: 50%;
  display: inline-block;
  border: none;
  border-style: none;
  text-align: center;
  font-size: x-large;
  box-shadow: inset 0px 0px 0px 10px #FF8D3A;
}

Answer 1

您可以使用绝对定位:

input[type=text]:focus {
  height: 150px;
  width: 150px;
  background-color: white;
  caret-color: transparent;
  border-radius: 50%;
  display: inline-block;
  border: none;
  border-style: none;
  text-align: center;
  font-size: x-large;
  box-shadow: inset 0px 0px 0px 10px #FF8D3A;
}
input[type=text]:focus + .notice{
display:block;
}

.group {
  position: relative;
}

.notice {
  color: #FF8D3A;
  font-size: 30px;
  position: absolute;
  left: 40px;
  top: 30px;
  display:none;
}

<div class="group">
  <input type="text" name="" value="Start" id="">
  <span class="notice">STOP</span>
</div>