相关疑难解决方法(0)

如何从 javascript 更改 #abc 样式的 :before 内容？

<script>
document.getElementById('abc').style.content='-';
</script>

<style>
#abc:before{content:"+";}
</style>

我使用:after伪元素在一个块（<li>以我为例）之后显示一个装饰（三角形）。这个想法是要区分当前选择li的其他人。

在这里摆弄

的HTML如下：

<ul>
    <li class="active" style="background-color: hsl(108, 60%, 50%)">One</li>
    <li style="background-color: hsl(36, 60%, 50%)">Two</li>
    <li style="background-color: hsl(252, 60%, 50%)">Three<li>
</ul>

和CSS：

ul li {
    width: 300px;
    height: 30px;
    border: 1px dashed;
    position: relative;
}

li.active::after {
    content: " 0020";
    display: block;
    font-size: 0px;
    position: absolute;
    left:100%;
    top: 0%;
    width: 0px;
    height: 0px;
    background: transparent;
    border: 17px solid transparent;
    border-left-color: #FF3900;
}

我想更改伪元素的border-left-color样式属性，li.active::after以background-color将<li>元素与匹配class=active。

我想出了以下jQuery： …

我从Bootstrap 3.0.3 docs站点复制了bs-example的CSS代码.我是一个CSS初学者,所以如果有人能解释我,我会很感激.

以下代码:

/* Echo out a label for the example */
.bs-example:after {
  content: "Example";
  position: absolute;
  top:  15px;
  left: 15px;
  font-size: 12px;
  font-weight: bold;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
}

它按预期工作,

但我想标题,例子,可以改变.我想使用像我们这样的标签<zd></zd>.

提前致谢.

我有使用Twitter的引导3,代码nav用right-arrow,我使用创建的border-*属性.但是,如果我使用非常长的文本right-arrow,它不会扩展,如果我使用百分比,代码将无法正常工作...

关于JsFiddle的例子

.custom-nav-stacked>li>a {
  border-radius: 2px;
}

.custom-nav-stacked>li.active>a:after,
.custom-nav-stacked>li.active>a:hover:after,
.custom-nav-stacked>li.active>a:focus:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -19px;
  /*margin-left: -1px;*/
  border-top: 19px solid transparent;
  border-left: 13px solid #428bca;
  border-bottom: 19px solid transparent;
}

关于JsFiddle的例子

如何根据文本量使三角形响应？

我有一个非常简单的元素：

使用Javascript后如何检查该元素是否包含::？

（我有使用的元素document.getElementsByTagName('h2')[0]）

我不知道它是如何工作的，我也不需要知道，我只需要代码来看看它是否存在......

在某些情况下，该元素如下所示：

如果可能的话，我需要能够检测到这两种情况！

我明白了：

您无法通过 JavaScript 修改伪元素，因为它们不是 DOM 的一部分

我还知道我们可以通过附加 style -- more来在伪元素中添加属性。

然而，附加的解决方案只能增加价值。添加并不意味着能够动态改变。我还需要有替换属性值的能力。

因此，我尝试使用attr()动态更改背景图像。不过，目前attr仅支持contentproperty - more。

那么我还可以在这里尝试什么呢？

为了添加更多问题的上下文，基本上，我想动态更新聊天中的头像图像。头像图像设置在伪元素(before和after)中。这是聊天 UI 的代码笔 - http://codepen.io/clintioo/pen/HAkjq

非常感谢！

我正在尝试为框模型属性设置CSS变量。我要支持为所有方面以及各个方面设置值。我想拥有默认值，但是无论哪种方式都可以覆盖。我尝试使用后备值，但收效甚微。

就像是：

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

如果border-width具有默认值，则它将无法正常工作，那么它将始终优先于后备值。不确定目前有没有办法做到这一点，但是我觉得已经很接近找到解决方案了。

这是我正在玩的一个堆叠闪电战： stackblitz

我有两种字体，Cooper Black 和 Cooper Hilite。我想将它们放在彼此之上，如下图所示：http : //viewerslikeu.squarespace.com/storage/720x360_1.png

有接班人吗？

我想选择一个由CSS选择器创建的元素:before.

我通过使用尝试了$('#element:before'),但是没有用,因为它选择了整个元素,而不仅仅是:before元素.

以下是示例代码:DEMO

在该示例中,只有字符串"1."应该是红色,而不是整个字符串.知道怎么做吗？

我有以下情况:(样式在SASS中完成,省略了不必要的样式.)

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }
}

这会在应用程序的菜单栏顶部创建一个栏.在某些情况下,必须删除此栏.我读过这些问题,但没有成功.删除:: before选择器添加的这个栏的最佳方法是什么？