Question

如何创建一个按钮，在按钮外显示文字？我想创建一个按钮列表，但我希望按钮文本（按钮值）显示在按钮之前，所以它看起来像这样：

此处的按钮文字[按钮]

我希望按钮文本左对齐，按钮本身右对齐。我是CSS新手，不知道这是否可行。我不能单独编写文本的原因是我正在更新现有项目的样式表，并且我正在尝试对html进行最小的更改，因为项目包含多个文件。这可能吗？

Answer 1

您可以尝试这样的操作，这样就不必设置按钮的显式宽度。您隐藏原始按钮文本并使用伪元素内容显示与按钮相同的字符串。

button {
  position: relative;     /* make the button the parent */
}

button span {
  visibility: hidden;     /* hide the original button text */
}

button:after {
  content: 'Button text';
  position: absolute;
  left: 100%;             /* position text just outside the button edge */
  white-space: nowrap;    /* prevent wrapping */
  top: 2px;
}

<button>
   <span>Button text</span>
</button>

Answer 2

如果您只使用CSS，请尝试pseudo-element ::before并将其设为var southwestValues = test.results[0].geometry.bounds.southwest; var lat = southwestValues.lat; // gives you 35.9677851 var long = southwestValues.lng; // gives you -87.054903和按钮position:absolute。必须根据按钮文本的长度调整位置，因为所有长度都相对于按钮：

.btn


position:relative - 按钮本身的位置与其原始位置有关。在演示中，按钮已从左侧移动了父级（即。left: 50%;）宽度的50％。


.btn ::前


<body> - 伪元素的宽度是按钮宽度的3倍。

width:300% - 伪元素的位置是按钮右边缘的75％。

这有点复杂但如果您不想使用正确的HTML，那么请为CSS恶作剧做好准备。好的一面是，通过调整视口大小（即调整窗口大小），文本和与自身相关的按钮的位置永远不会受到不利影响（除非你的CSS非常糟糕）

演示

right:75%

.btn {
  font: 400 16px/1.4 Consolas;
  position: relative;
  display: inline-block;
  left: 50%;
}

.btn::before {
  font: inherit;
  content: 'Text on the left';
  position: absolute;
  display: inline-block;
  width: 300%;
  right: 70%;
}

如何在CSS中的按钮外显示按钮文本

2 个答案:

.btn

.btn ::前

演示