CSS for blockquote border?

CSS friends, I've been playing around with adding a gradient for things like link underlining; it looks like this:

a {
  color: {{text_color}};
  text-decoration: none;
  background: linear-gradient(to left, #ad1981, #46adf9 100%);
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: repeat-x;
  }

I'm trying to figure out how to achieve a similar effect as a 2px left hand border for blockquotes, but I'm misunderstanding something about how it works. Any insight much appreciated. My best guess so far looks like this:

  padding: 0 0 0 12px;
  opacity: 0.8;
  background: linear-gradient(to left, #ad1981, #46adf9 100%);
  background-position: left;
  background-size: 100% 2px;
  background-repeat: repeat-y;
2 replies

Does this JSFiddle might show you what you're after?

Answered a year ago · Improve this answer

😍

Thanks so much kind stranger, that's exactly what I was hoping to achieve. (And... I was kinda close?)

Answered a year ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us

Tags

developers 28 questions bug 14 questions posts 9 questions resolved 7 questions request 6 questions google-drive 5 questions configure 4 questions pages 3 questions added 3 questions meta 3 questions More tags →
Subscribe for changes
RSS Feed of latest questions