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>