如何正确对齐此 ::after-content？

Question

我在数字框 0 和 10 下方添加了文本“非常不可能/非常可能”，如下图所示：https://imgur.com/a/7JZbC92。第一个文本很好（“非常不可能”），但“非常可能”文本继续通过数字框，在移动设备上更是如此。我希望它被“修复”并且永远不会继续通过 10 盒。这可能吗？

另外，我想在文本上方添加一些填充，但是“padding-top”不起作用。

这是我的 CSS 代码：

#recommend_10::after {
  content: "Very likely";
  font-size: 11px;
  white-space: nowrap;
}
#recommend_0::after {
  content: "Very unlikely";
  font-size: 11px;
  white-space: nowrap;  
}

这是按钮的 CSS，但我不知道是谁写的：

/* NPS */
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/customer_files/survey457789/retailrelation.js"></script>
<style>

.starbutton {
    border-radius: 5px;
    width: 46px;
    height: 46px;
    display: inline-block;
    background-color: rgb(200, 200, 200);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
  text-align: center;
line-height: 46px;
color: white;
text-decoration: none;
font-weight: bolder;
font-family: Verdana;
font-size: 20px;}

.starWrapper, .starWrapperTen {
    width: 52px;
    height: 46px;
    float: left;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}

#recommendToFriend {
  width: 600px;}

@media (max-width: 599px) {
.starWrapperTen {
  width: 24px;}

.starWrapperTen .starbutton {
  width: 22px;
  font-size: 15px;
  height: 41px;
  line-height: 41px;}

#recommendToFriend {
  width: 265px;}
}

.header {
    font-weight: bold;
  text-align: left;}

.closed-horizontal .choice-headers TD {
  font-size: medium;}

.review {
    margin: 0 auto;
    min-width: 265px;
    width: 265px;
    padding-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 150px;}

.description {
  margin-left: 10px;
display: inline-block;
  height: 30px;}

.terms {
 font-size: 11px;
padding-top: 20px;}

.hideme {
 display:none;
  visibility:hidden;}

.h1 {
 font-size: 32px; }

.restriction{
 font-size: 14px;}

.question-title{
 font-weight: bold; }

.customHeader,
.page0 .question-title{
 font-size: 18px;
 font-weight: bold;}

这是 HTML - 但我自己无法访问或修改它：

<div class="review" id="recommendToFriend">
<p class="header">On a scale of zero to 10, with 10 being highest, what’s the likelihood that you would recommend us (our company) to a friend or colleague?</p>
<div class="starWrapperTen" id="recommend_0"><a class="starbutton" href="#" style="background-color: rgb(229, 2, 0);">0</a></div>
<div class="starWrapperTen" id="recommend_1"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">1</a></div>
<div class="starWrapperTen" id="recommend_2"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">2</a></div>
<div class="starWrapperTen" id="recommend_3"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">3</a> </div>
<div class="starWrapperTen" id="recommend_4"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">4</a></div>
<div class="starWrapperTen" id="recommend_5"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">5</a></div>
<div class="starWrapperTen" id="recommend_6"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">6</a></div>
<div class="starWrapperTen" id="recommend_7"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">7</a></div>
<div class="starWrapperTen" id="recommend_8"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">8</a> </div>
<div class="starWrapperTen" id="recommend_9"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">9</a></div>
<div class="starWrapperTen" id="recommend_10"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">10</a></div>
<p id="recommend_description" class="description"></p></div>

我对 HTML 了解不多，无法知道需要解决什么问题，但我认为这是代码的相关部分：https://imgur.com/a/Oib8y5p

提前致谢！

Answer 1

尝试使用这样的东西：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container__inner {
  display: flex;
  align-items: center;
  position: relative;
}

.container__inner::before,
.container__inner::after {
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 500;
  white-space: nowrap;
}

.container__inner::before {
  content: "Very unlikely";
  right: calc(100% + 15px);
}

.container__inner::after {
  content: "Very likely";
  left: calc(100% + 15px);
}

.container__item {
  width: 50px;
  height: 50px;
  background: #c8c8c8;
  border-radius: 4px;
  margin-right: 12px;
  font-size: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.container__item:last-of-type {
  margin-right: 0;
}

.container__item_active {
  background: #e50200;
}

<div class="container">
  <div class="container__inner">
    <div class="container__item container__item_active">1</div>
    <div class="container__item">2</div>
    <div class="container__item">3</div>
    <div class="container__item">4</div>
    <div class="container__item">5</div>
    <div class="container__item">6</div>
    <div class="container__item">7</div>
    <div class="container__item">8</div>
    <div class="container__item">9</div>
    <div class="container__item">10</div>
  </div>
</div>