首页 / 技术问答 / Css问答列表 / 问答详情

Css 使用之前和之后为锚标签添加画笔描边效果

我正在try 创建一个按钮，它在开始和结束时都有笔刷笔划.画笔笔划是SVG文件，所以我考虑过使用before和after，但我无法将SVG放在按钮的容器之前

.container {
  display: flex;
  flex-direction: column;
  margin: 5rem;
}

.btn-primary {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 18px;
  background-color: black;
  color: white;
}

.btn-primary::before {
  display: block;
  content: url(./assets/brush-stroke.svg);
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}
<html>

<head>
</head>

<body>
  <div class="container">
    <h1>Brush Button</h1>
    <a class="btn-primary">Click me</a>
  </div>
</body>

</html>

画笔笔划SVG(之前)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 32 52" style="enable-background:new 0 0 32 52;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#000000;}
</style>
<path id="Path_32" class="st0" d="M8.8,52c-0.1,0-0.3-0.1-0.3-0.2c0,0-0.1-0.1-0.1-0.1l-0.2,0c-0.3,0-0.6-0.1-0.9-0.1H7.1
    c-0.2,0-0.5,0-0.7,0H6.4c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0-0.6,0.1c-0.3,0.1-0.7,0.2-1.1,0.2c-0.1,0-0.1,0-0.2,0
    c-1-0.2-1.9-0.5-2.9-0.8c-0.3-0.1-0.5-0.4-0.5-0.7c0-0.2-0.1-0.4-0.1-0.6c-0.1-0.6-0.1-1.1-0.1-1.7c0-0.3,0-0.6,0-1
    c0-0.2,0-0.3,0-0.5c0-0.2,0-0.5,0-0.7c0-0.5,0-1.1,0-1.6c0.1-1,0.1-2.1-0.1-3.1c-0.1-0.4-0.1-0.7-0.1-1.1c0-0.6,0-1.2,0.1-1.8
    c0-0.1,0-0.2,0-0.3c0-0.2,0-0.4,0.1-0.6c0-0.3,0-0.6,0-0.9v0c0-1.6-0.1-3.1-0.1-4.6c-0.1-1.2,0-2.5,0-3.7c0-0.9,0.1-1.8,0-2.7
    c0-0.1,0-0.1,0-0.2c0.2-0.5,0.2-1.1,0-1.6v0c0.1-0.1,0.2-0.1,0.4-0.2c0-0.2,0-0.4,0-0.6c-0.1-0.2-0.3-0.4-0.4-0.5c0-0.1,0-0.2,0-0.2
    c0-0.1,0-0.2,0-0.4c0-0.3-0.1-0.7-0.1-1.1c0-0.5-0.1-1.1-0.2-1.6c0-0.1,0-0.3,0-0.4c0-0.6,0-1.1-0.1-1.7c0-0.2-0.1-0.4-0.1-0.6
    C0,15.7,0,15.6,0.2,15.4c0.2-0.3,0.3-0.4,0.2-1.1v-0.1c0-0.2,0-0.3,0-0.5c0-0.6,0-1.3-0.1-1.9c-0.1-0.5-0.1-0.9,0.1-1.4
    c0-0.2,0.1-0.3,0.1-0.6C0.4,9.4,0.4,9,0.4,8.6c0-0.2,0-0.4,0-0.6c0-0.1,0-0.2,0-0.3c0-0.2,0-0.3,0-0.5c-0.1-0.8,0-1.7,0.1-2.5
    c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0c0-0.1,0-0.2,0-0.3c0-0.2,0-0.5,0-0.7c0-0.4,0-0.8,0-1.1V2.2c0-0.5,0-0.9,0.1-1.4
    c0-0.2,0.1-0.3,0.3-0.4C1.1,0.1,1.5,0,1.9,0C2,0,2,0,2.1,0c0.3,0,0.5,0.3,0.7,0.5l0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0
    c0.4,0.4,0.5,0.6,0.7,0.6c0.2,0,0.4-0.1,0.7-0.4c0.3-0.2,0.6-0.3,1-0.3c0.3,0,0.6,0.1,0.8,0.2c0,0,0.1,0,0.1,0.1
    c0.1,0,0.1,0.1,0.2,0.1l0,0c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.2-0.1,0.3-0.1c0.3,0,0.6,0.2,0.8,0.4
    c0.2,0.2,0.4,0.3,0.6,0.3c0.1,0,0.1,0,0.2,0c0.4,0,0.8-0.2,1.1-0.5C10,1,10.2,0.9,10.4,0.7c0.3-0.2,0.6-0.3,0.9-0.3
    c0.3,0,0.5,0.1,0.7,0.2C12.7,1,13.3,1.4,14,1.9C14,2,14.1,2,14.2,2.1c0.2,0,0.4,0,0.6,0c0.1,0,0.3,0,0.4,0s0.2,0,0.3,0
    c0.3,0,0.6,0,0.9-0.1h0l0,0l0,0c0.1-0.2,0.3-0.3,0.5-0.5L17,1.4c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0l0.2,0.3l0,0c0.1,0,0.2-0.1,0.4-0.1
    c0.3,0,0.5-0.2,0.7-0.4C22.9,0.4,27.4,0,32,0v52c-5.6-0.2-9.5-0.6-11.9-0.6c-0.9,0-1.7,0-2.6-0.1c-0.4-0.1-0.7-0.2-1.1-0.2
    c-0.4,0-0.8,0.1-1.1,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.7,0.1-1.5,0.2-2.2,0.2c-0.7,0-1.3-0.1-2-0.2c-0.2-0.1-0.5-0.1-0.7-0.1
    c-0.2,0-0.4,0-0.6,0.1c0,0.4-0.1,0.4-0.4,0.5C8.9,52,8.9,52,8.8,52z"/>
</svg>

Brush stroke example

推荐答案

您可以实现此宽度绝对定位:

.btn-primary {
   position: relative;
}

.btn-primary::before {
   left: -28px;
   position: absolute;
}

如果你看到按钮边缘和画笔之间有细微的缝隙，你可以把它敲到-27px来拉近.

您可能还需要将按钮包装在一个元素中，给它一个左和/或右填充，以补偿按钮本身的绝对悬垂或左边距.

我也做了一些其他的改变.我将SVG设置为背景图像，而不是将URL放在内容规则中.

.container {
    display: flex;
    flex-direction: column;
    margin: 5rem;
}

.btn-primary {
    background-color: black;
    color: white;
    font-size: 18px;
    margin-left: 2.5em;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    position: relative;
}

.btn-primary::before,
.btn-primary::after {
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    width: 2.5em;
}

.btn-primary::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 52' style='enable-background:new 0 0 32 52;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23000000;%7D%0A%3C/style%3E%3Cpath id='Path_32' class='st0' d='M8.8,52c-0.1,0-0.3-0.1-0.3-0.2c0,0-0.1-0.1-0.1-0.1l-0.2,0c-0.3,0-0.6-0.1-0.9-0.1H7.1 c-0.2,0-0.5,0-0.7,0H6.4c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0-0.6,0.1c-0.3,0.1-0.7,0.2-1.1,0.2c-0.1,0-0.1,0-0.2,0 c-1-0.2-1.9-0.5-2.9-0.8c-0.3-0.1-0.5-0.4-0.5-0.7c0-0.2-0.1-0.4-0.1-0.6c-0.1-0.6-0.1-1.1-0.1-1.7c0-0.3,0-0.6,0-1 c0-0.2,0-0.3,0-0.5c0-0.2,0-0.5,0-0.7c0-0.5,0-1.1,0-1.6c0.1-1,0.1-2.1-0.1-3.1c-0.1-0.4-0.1-0.7-0.1-1.1c0-0.6,0-1.2,0.1-1.8 c0-0.1,0-0.2,0-0.3c0-0.2,0-0.4,0.1-0.6c0-0.3,0-0.6,0-0.9v0c0-1.6-0.1-3.1-0.1-4.6c-0.1-1.2,0-2.5,0-3.7c0-0.9,0.1-1.8,0-2.7 c0-0.1,0-0.1,0-0.2c0.2-0.5,0.2-1.1,0-1.6v0c0.1-0.1,0.2-0.1,0.4-0.2c0-0.2,0-0.4,0-0.6c-0.1-0.2-0.3-0.4-0.4-0.5c0-0.1,0-0.2,0-0.2 c0-0.1,0-0.2,0-0.4c0-0.3-0.1-0.7-0.1-1.1c0-0.5-0.1-1.1-0.2-1.6c0-0.1,0-0.3,0-0.4c0-0.6,0-1.1-0.1-1.7c0-0.2-0.1-0.4-0.1-0.6 C0,15.7,0,15.6,0.2,15.4c0.2-0.3,0.3-0.4,0.2-1.1v-0.1c0-0.2,0-0.3,0-0.5c0-0.6,0-1.3-0.1-1.9c-0.1-0.5-0.1-0.9,0.1-1.4 c0-0.2,0.1-0.3,0.1-0.6C0.4,9.4,0.4,9,0.4,8.6c0-0.2,0-0.4,0-0.6c0-0.1,0-0.2,0-0.3c0-0.2,0-0.3,0-0.5c-0.1-0.8,0-1.7,0.1-2.5 c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0c0-0.1,0-0.2,0-0.3c0-0.2,0-0.5,0-0.7c0-0.4,0-0.8,0-1.1V2.2c0-0.5,0-0.9,0.1-1.4 c0-0.2,0.1-0.3,0.3-0.4C1.1,0.1,1.5,0,1.9,0C2,0,2,0,2.1,0c0.3,0,0.5,0.3,0.7,0.5l0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0 c0.4,0.4,0.5,0.6,0.7,0.6c0.2,0,0.4-0.1,0.7-0.4c0.3-0.2,0.6-0.3,1-0.3c0.3,0,0.6,0.1,0.8,0.2c0,0,0.1,0,0.1,0.1 c0.1,0,0.1,0.1,0.2,0.1l0,0c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.2-0.1,0.3-0.1c0.3,0,0.6,0.2,0.8,0.4 c0.2,0.2,0.4,0.3,0.6,0.3c0.1,0,0.1,0,0.2,0c0.4,0,0.8-0.2,1.1-0.5C10,1,10.2,0.9,10.4,0.7c0.3-0.2,0.6-0.3,0.9-0.3 c0.3,0,0.5,0.1,0.7,0.2C12.7,1,13.3,1.4,14,1.9C14,2,14.1,2,14.2,2.1c0.2,0,0.4,0,0.6,0c0.1,0,0.3,0,0.4,0s0.2,0,0.3,0 c0.3,0,0.6,0,0.9-0.1h0l0,0l0,0c0.1-0.2,0.3-0.3,0.5-0.5L17,1.4c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0l0.2,0.3l0,0c0.1,0,0.2-0.1,0.4-0.1 c0.3,0,0.5-0.2,0.7-0.4C22.9,0.4,27.4,0,32,0v52c-5.6-0.2-9.5-0.6-11.9-0.6c-0.9,0-1.7,0-2.6-0.1c-0.4-0.1-0.7-0.2-1.1-0.2 c-0.4,0-0.8,0.1-1.1,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.7,0.1-1.5,0.2-2.2,0.2c-0.7,0-1.3-0.1-2-0.2c-0.2-0.1-0.5-0.1-0.7-0.1 c-0.2,0-0.4,0-0.6,0.1c0,0.4-0.1,0.4-0.4,0.5C8.9,52,8.9,52,8.8,52z'/%3E%3C/svg%3E");
    background-position: center right;
    left: -2.5em;
}

.btn-primary::after {
    /* Needs swapping for correct SVG/image */
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 52' style='enable-background:new 0 0 32 52;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23000000;%7D%0A%3C/style%3E%3Cpath id='Path_32' class='st0' d='M8.8,52c-0.1,0-0.3-0.1-0.3-0.2c0,0-0.1-0.1-0.1-0.1l-0.2,0c-0.3,0-0.6-0.1-0.9-0.1H7.1 c-0.2,0-0.5,0-0.7,0H6.4c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0-0.6,0.1c-0.3,0.1-0.7,0.2-1.1,0.2c-0.1,0-0.1,0-0.2,0 c-1-0.2-1.9-0.5-2.9-0.8c-0.3-0.1-0.5-0.4-0.5-0.7c0-0.2-0.1-0.4-0.1-0.6c-0.1-0.6-0.1-1.1-0.1-1.7c0-0.3,0-0.6,0-1 c0-0.2,0-0.3,0-0.5c0-0.2,0-0.5,0-0.7c0-0.5,0-1.1,0-1.6c0.1-1,0.1-2.1-0.1-3.1c-0.1-0.4-0.1-0.7-0.1-1.1c0-0.6,0-1.2,0.1-1.8 c0-0.1,0-0.2,0-0.3c0-0.2,0-0.4,0.1-0.6c0-0.3,0-0.6,0-0.9v0c0-1.6-0.1-3.1-0.1-4.6c-0.1-1.2,0-2.5,0-3.7c0-0.9,0.1-1.8,0-2.7 c0-0.1,0-0.1,0-0.2c0.2-0.5,0.2-1.1,0-1.6v0c0.1-0.1,0.2-0.1,0.4-0.2c0-0.2,0-0.4,0-0.6c-0.1-0.2-0.3-0.4-0.4-0.5c0-0.1,0-0.2,0-0.2 c0-0.1,0-0.2,0-0.4c0-0.3-0.1-0.7-0.1-1.1c0-0.5-0.1-1.1-0.2-1.6c0-0.1,0-0.3,0-0.4c0-0.6,0-1.1-0.1-1.7c0-0.2-0.1-0.4-0.1-0.6 C0,15.7,0,15.6,0.2,15.4c0.2-0.3,0.3-0.4,0.2-1.1v-0.1c0-0.2,0-0.3,0-0.5c0-0.6,0-1.3-0.1-1.9c-0.1-0.5-0.1-0.9,0.1-1.4 c0-0.2,0.1-0.3,0.1-0.6C0.4,9.4,0.4,9,0.4,8.6c0-0.2,0-0.4,0-0.6c0-0.1,0-0.2,0-0.3c0-0.2,0-0.3,0-0.5c-0.1-0.8,0-1.7,0.1-2.5 c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0c0-0.1,0-0.2,0-0.3c0-0.2,0-0.5,0-0.7c0-0.4,0-0.8,0-1.1V2.2c0-0.5,0-0.9,0.1-1.4 c0-0.2,0.1-0.3,0.3-0.4C1.1,0.1,1.5,0,1.9,0C2,0,2,0,2.1,0c0.3,0,0.5,0.3,0.7,0.5l0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0 c0.4,0.4,0.5,0.6,0.7,0.6c0.2,0,0.4-0.1,0.7-0.4c0.3-0.2,0.6-0.3,1-0.3c0.3,0,0.6,0.1,0.8,0.2c0,0,0.1,0,0.1,0.1 c0.1,0,0.1,0.1,0.2,0.1l0,0c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.2-0.1,0.3-0.1c0.3,0,0.6,0.2,0.8,0.4 c0.2,0.2,0.4,0.3,0.6,0.3c0.1,0,0.1,0,0.2,0c0.4,0,0.8-0.2,1.1-0.5C10,1,10.2,0.9,10.4,0.7c0.3-0.2,0.6-0.3,0.9-0.3 c0.3,0,0.5,0.1,0.7,0.2C12.7,1,13.3,1.4,14,1.9C14,2,14.1,2,14.2,2.1c0.2,0,0.4,0,0.6,0c0.1,0,0.3,0,0.4,0s0.2,0,0.3,0 c0.3,0,0.6,0,0.9-0.1h0l0,0l0,0c0.1-0.2,0.3-0.3,0.5-0.5L17,1.4c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0l0.2,0.3l0,0c0.1,0,0.2-0.1,0.4-0.1 c0.3,0,0.5-0.2,0.7-0.4C22.9,0.4,27.4,0,32,0v52c-5.6-0.2-9.5-0.6-11.9-0.6c-0.9,0-1.7,0-2.6-0.1c-0.4-0.1-0.7-0.2-1.1-0.2 c-0.4,0-0.8,0.1-1.1,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.7,0.1-1.5,0.2-2.2,0.2c-0.7,0-1.3-0.1-2-0.2c-0.2-0.1-0.5-0.1-0.7-0.1 c-0.2,0-0.4,0-0.6,0.1c0,0.4-0.1,0.4-0.4,0.5C8.9,52,8.9,52,8.8,52z'/%3E%3C/svg%3E");
    background-position: center left;
    right: -2.5em;
}

完整示例:https://codepen.io/kieranmcclung/pen/oNppGvr

Css相关问答推荐

在菜单中最后一项之后排除MUI分隔符

你能混合固定/相对定位吗？

如何使2个元素的宽度相同？

如何将 div 和 img 包装在 display：flex 容器中

为什么align-content：start应用于单行项目？

使用 CSS 关键帧动画更改内容

有人可以解释为什么我的 CSS 转换如此突然吗？

背景上带有文本的按钮的反转 colored颜色

如何在父叠加层之上呈现子子

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

带有图像的 CSS 网格在 Firefox 中表现不同

JavaFX TreeTableView Css for unfocused selected line

适合剩余高度

你可以在 CSS 中扩展实体(entity)吗？

Bootstrap 4 img-circle 类似乎不存在

如何使内容出现在固定的 DIV 元素下方？

将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

谷歌浏览器两种元素样式的区别

使用自定义 CSS 在 WebView 中呈现 HTML

flexbox容器中的省略号

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630